클로드 기초 및 활용 13회: 클로드 디자인 입문 — "예쁘게 해 주세요"라고 하면 안 되는 이유

"예쁘게 해 주세요"라고 했더니 더 이상해졌습니다

10회에서 아티팩트로 문서나 화면을 만들어 보셨다면, 아마 이런 경험을 하셨을 겁니다. 결과물이 밋밋합니다. 그래서 "좀 더 예쁘게 해 주세요"라고 합니다. 그러면 색이 바뀌고 그림자가 붙는데, 여전히 어딘가 아쉽습니다.

몇 번 더 시도하다 보면 처음보다 나빠지기도 합니다. 왜 이럴까요?

"예쁘게"는 지시가 아니라 감상이기 때문입니다. 오늘은 감상을 지시로 바꾸는 법을 배웁니다.

제3부를 시작하며

13회부터 15회까지는 「클로드로 디자인하기」입니다. 조금 낯설게 들리실 수 있습니다. 클로드는 글 쓰는 도구 아니었나요?

맞습니다. 그런데 10회에서 만들어 본 아티팩트를 떠올려 보세요. 문서, 표, 눌러 볼 수 있는 화면. 이것들은 보기 좋아야 쓸모가 있는 결과물입니다. 그리고 그 '보기 좋음'은 말로 지시할 수 있습니다.

이 부는 비개발자를 위한 것입니다. 코드를 몰라도 웹페이지·정리 문서·카드·발표 자료를 만들 수 있게 되는 구간입니다.

오늘의 목표

오늘이 끝나면 할 수 있게 되는 것: 결과물이 왜 밋밋한지 원인을 알고, 감상 대신 측정 가능한 말로 디자인을 지시할 수 있고, 마음에 안 드는 결과물을 정확히 지적해 고칠 수 있게 됩니다.

왜 기본값은 밋밋한가

클로드가 실력이 없어서가 아닙니다. 안전한 선택을 하기 때문입니다.

아무 지시가 없으면 클로드는 어디에 놓아도 크게 어색하지 않은 형태를 고릅니다. 흰 배경, 무난한 글꼴, 표준적인 간격. 어떤 용도든 최소한은 하는 결과물입니다.

문제는 "최소한은 하는 것"과 "그 용도에 맞는 것"이 다르다는 데 있습니다. 결혼식 청첩장과 재무 보고서가 같은 모양일 리 없으니까요.

그러니 밋밋함은 결함이 아니라 정보 부족의 결과입니다. 5회에서 배운 것과 정확히 같은 구조입니다.

"예쁘게"가 왜 안 통하나

세 가지 이유가 있습니다.

① 사람마다 다릅니다. 누군가에게 예쁜 것은 화려한 것이고, 누군가에게는 여백이 많은 것입니다.

② 방향이 없습니다. "지금보다 나은 어딘가"라고만 알려 줄 뿐, 어디로 가라는 말이 없습니다. 5회의 "하지 마"보다 "이렇게 해" 원칙과 같습니다.

③ 확인할 수 없습니다. 결과가 나왔을 때 "예뻐졌는지" 판정할 기준이 없습니다. 그러니 계속 요청하게 되고, 계속 다른 결과가 나옵니다.

🔴 디자인을 지시하는 네 가지 말

이 회차의 핵심입니다. 디자인은 네 가지 측정 가능한 항목으로 지시할 수 있습니다.

• 색 — 무슨 색을, 어디에, 몇 개나
• 간격 — 요소들 사이를 얼마나 띄울지
• 크기 — 무엇을 얼마나 크게
• 순서 — 무엇을 먼저 보게 할지

이 넷은 감상이 아니라 사실입니다. 결과를 보고 지켜졌는지 확인할 수 있습니다. 그래서 지시로 쓸 수 있습니다.

① 색 — 몇 개를 어디에

초보자가 가장 자주 하는 실수는 색을 너무 많이 쓰는 것입니다. 항목마다 다른 색을 넣으면 강조가 사라집니다. 다 강조하면 아무것도 강조되지 않으니까요.

실용적인 규칙: 색은 세 개까지. 배경색 하나, 글자색 하나, 강조색 하나입니다.

지시할 때는 이렇게 말하면 됩니다.

"배경은 아주 어두운 회색, 글자는 밝은 회색, 강조는 청록색 한 가지만 쓰세요. 다른 색은 쓰지 마세요."

더 정확히 하려면 색상 코드를 주면 됩니다. "#0F1418" 같은 형식입니다. 코드를 모르셔도 됩니다. "짙은 남색", "따뜻한 회색"처럼 말로 해도 통합니다.

색에서 가장 중요한 것 — 대비

색보다 중요한 것이 대비입니다. 글자와 배경의 밝기 차이요.

이건 취향 문제가 아니라 읽히느냐 마느냐의 문제입니다. 회색 배경에 연한 회색 글자는 아무리 세련돼 보여도 읽기 어렵습니다. 특히 밝은 곳에서 화면을 보거나 시력이 낮은 사람에게는 사실상 안 보입니다.

그래서 이 문장을 항상 붙이시길 권합니다.

"글자와 배경의 대비를 충분히 높게 유지해 주세요. 연한 회색 글자는 쓰지 마세요."

디자인 감각이 없어도 이 한 줄이면 가장 흔한 실패를 피할 수 있습니다.

② 간격 — 여백이 만드는 것

초보자의 결과물이 답답해 보이는 이유는 대개 여백 부족입니다. 내용을 꽉 채우면 정보가 많아 보이지만, 실제로는 읽기가 어려워집니다.

지시 예:

"항목 사이를 넉넉히 띄우고, 각 덩어리 안쪽에도 여백을 충분히 주세요. 화면을 꽉 채우지 마세요."

더 구체적으로 하려면 숫자를 쓰면 됩니다. "항목 사이는 24픽셀, 카드 안쪽 여백은 20픽셀"처럼요. 정확한 숫자를 모르셔도 "넉넉히"만으로도 충분히 달라집니다.

③ 크기 — 최소 크기를 정하세요

디자인 결과물에서 글자가 작게 나오는 일이 흔합니다. 작은 글자가 세련돼 보이기 때문입니다. 하지만 읽을 수 없으면 세련됨은 무의미합니다.

지시 예:

"본문 글자는 최소 16픽셀 이상으로 해 주세요. 그보다 작게 만들지 마세요."

그리고 누르는 요소(버튼, 링크)에도 최소 크기가 필요합니다.

"버튼은 손가락으로 누를 수 있게 충분히 크게 만들어 주세요."

이건 스마트폰에서 특히 중요합니다. 작은 버튼은 정확히 누르기 어렵고, 손이 떨리는 분이나 시야가 좁은 분에게는 사실상 못 쓰는 버튼입니다.

④ 순서 — 무엇을 먼저 보게 할까

사람의 눈은 크고 진한 것부터 봅니다. 그러니 가장 중요한 것을 가장 크고 진하게 만들면, 그게 곧 순서가 됩니다.

지시 예:

"이 화면에서 가장 먼저 보여야 할 것은 [○○]입니다. 그것을 가장 크고 눈에 띄게 배치해 주세요. 나머지는 그보다 작고 차분하게요."

이 지시가 강력한 이유는, 여러분이 무엇이 중요한지 알기 때문입니다. 그건 디자인 감각이 아니라 업무 판단입니다. 여러분이 더 잘 압니다.

그대로 쓸 수 있는 지시문

네 가지를 합치면 이런 문단이 됩니다. 12회에서 배운 대로 저장해 두고 꺼내 쓰세요.

"디자인은 다음 기준을 지켜 주세요. 색은 세 가지까지만(배경·글자·강조). 글자와 배경의 대비를 충분히 높게, 연한 회색 글자 금지. 본문은 16픽셀 이상. 항목 사이 여백을 넉넉하게. 가장 중요한 것은 [○○]이고 그것을 가장 크게 배치. 장식보다 읽기 쉬움을 우선해 주세요."

대괄호 부분만 바꿔 가며 쓰시면 됩니다.

피해야 할 표현들

반대로 쓰지 않는 게 나은 말도 정리해 둡니다. 전부 감상이라 방향을 주지 못합니다.

• "예쁘게" → 무엇이 예쁜지 말해야 합니다
• "세련되게" → 사람마다 다릅니다
• "깔끔하게" → 여백을 늘리라는 건지 요소를 줄이라는 건지 모릅니다
• "고급스럽게" → 색을 어둡게 하라는 건지 여백을 늘리라는 건지
• "트렌디하게" → 어느 시점의 무슨 유행인지

쓰고 싶다면 뒤에 설명을 붙이세요. "깔끔하게 — 요소 개수를 줄이고 여백을 늘려서요."

따라 하기 ① 아무 지시 없이 만들기

먼저 기준선을 만듭니다. 새 대화에서 이렇게 요청하세요.

"우리 동네 도서관 안내 카드를 웹 화면으로 만들어 주세요. 운영시간, 위치, 연락처가 들어가면 됩니다."

아티팩트로 결과가 나옵니다. 이게 기본값입니다. 잘 봐 두세요.

따라 하기 ② 네 가지 지시 붙이기

같은 대화에서 앞의 지시문을 붙여 다시 요청합니다.

"다시 만들어 주세요. 색은 세 가지까지만, 대비는 충분히 높게, 본문은 16픽셀 이상, 여백은 넉넉하게. 가장 먼저 보여야 할 것은 운영시간입니다."

결과를 기본값과 비교해 보세요. 지시한 네 가지가 실제로 지켜졌는지 확인하는 것이 핵심입니다. 취향에 맞는지는 그다음 문제입니다.

따라 하기 ③ 한 가지만 바꿔 보기

10회에서 배운 부분 수정을 씁니다.

"여백만 지금의 두 배로 늘려 주세요. 다른 건 그대로요."

여백 하나만 바뀌었을 때 인상이 얼마나 달라지는지 보세요. 대개 여백을 늘리는 것만으로 훨씬 나아집니다. 초보자가 가장 쉽게 얻을 수 있는 개선입니다.

따라 하기 ④ 일부러 나쁘게 만들어 보기

배우는 데 의외로 효과적인 방법입니다.

"이번엔 일부러 읽기 어렵게 만들어 주세요. 색을 다섯 가지 이상 쓰고, 여백을 없애고, 글자를 작게요."

결과를 보면 무엇이 읽기를 방해하는지가 확 보입니다. 그리고 그게 바로 평소에 피해야 할 것들입니다.

자주 겪는 오류 ① "고칠수록 나빠져요"

감상으로 지시하면 생기는 전형적인 문제입니다. "좀 더 세련되게" → 바뀜 → "아니 이건 아닌데" → 또 바뀜. 방향이 없으니 무작위로 움직입니다.

해결책은 두 가지입니다. 네 가지 말로 바꿔 지시하기, 그리고 10회에서 배운 버전 되돌리기로 나빠지기 전 상태로 돌아가기입니다.

오류 ② "매번 비슷한 느낌으로만 나와요"

구체적인 지시가 없으면 클로드는 자기가 잘하는 익숙한 형태로 수렴합니다. 이건 자연스러운 현상입니다.

벗어나는 방법은 두 가지입니다.

① 구체적으로 못 박기 — 색과 글꼴과 배치를 직접 지정합니다. 지정하면 그대로 따릅니다.

② 여러 안을 요청하기 — 이게 더 쉽고 효과적입니다.

"만들기 전에, 서로 다른 네 가지 방향을 제안해 주세요. 각각 배경색·강조색·글꼴 느낌과 한 줄 이유를 적어 주세요. 제가 하나 고르면 그것만 만들어 주세요."

이 요청이 강력한 이유는, 선택권이 여러분에게 넘어오기 때문입니다. 그리고 고르는 것은 만드는 것보다 훨씬 쉽습니다.

오류 ③ "글자가 너무 작아요"

기본값이 작게 나오는 경우가 많습니다. 최소 크기를 못 박으세요.

"본문 16픽셀 이상, 제목은 그보다 크게. 어떤 글자도 14픽셀 아래로 내려가지 않게 해 주세요."

이미 만들어진 것도 "글자 크기만 키워 주세요. 나머지는 그대로요"로 고칠 수 있습니다.

오류 ④ "화면 크기가 바뀌면 깨져요"

컴퓨터에서 잘 보이던 것이 휴대폰에서 이상해지는 경우입니다. 미리 말해 두면 됩니다.

"휴대폰 화면에서도 깨지지 않게 만들어 주세요. 좁은 화면에서는 항목이 세로로 쌓이게요."

이건 14회 「아티팩트로 만드는 실전 디자인」에서 더 자세히 다룹니다.

실전 사례 ① 공지문 만들기

동호회나 팀에 붙일 공지를 만든다고 해 봅시다.

"○○ 모임 공지 화면을 만들어 주세요. 가장 먼저 보여야 할 것은 날짜와 장소입니다. 색은 세 가지까지, 대비는 높게, 본문 16픽셀 이상, 여백 넉넉하게. 스마트폰에서 볼 사람이 많으니 좁은 화면에서도 잘 보이게요."

이 한 문단에 오늘 배운 네 가지가 모두 들어 있습니다. 그리고 결과를 보고 지켜졌는지 확인할 수 있습니다.

실전 사례 ② 자료를 카드로 정리하기

긴 글보다 카드 형태가 읽기 좋은 경우가 있습니다. 항목이 여럿이고 서로 비교되는 내용일 때요.

"아래 내용을 카드 형태로 정리해 주세요. 카드 하나에 항목 하나씩, 제목은 크게, 설명은 두 줄 이내로. 카드 사이 여백은 넉넉하게, 색은 세 가지까지만요."

여기서 "설명은 두 줄 이내" 같은 제약이 중요합니다. 제약이 없으면 카드마다 길이가 달라져 어수선해집니다. 제약은 통일감을 만드는 도구입니다.

실전 사례 ③ 저시력 관점의 디자인 기준

이 시리즈에서 계속 강조해 온 부분이지만, 디자인 회차에서는 특히 중요합니다. 읽기 어려운 디자인은 디자인이 아니라 장벽이기 때문입니다.

다음 기준을 기본 지시문에 넣어 두시길 권합니다. 저시력 사용자가 아니더라도, 이 기준을 지킨 결과물이 모두에게 읽기 편합니다.

• 어두운 배경 + 밝은 글자 또는 그 반대 — 어느 쪽이든 대비를 강하게
• 본문 최소 16픽셀 — 그 이하로 내려가지 않게
• 누르는 요소는 충분히 크게 — 손가락으로 정확히 누를 수 있게
• 색만으로 구분하지 않기 — 빨강/초록으로만 상태를 표시하면 색 구분이 어려운 사람은 알 수 없습니다. 글자 라벨을 함께 붙이세요
• 여백 넉넉하게 — 빽빽한 화면은 확대했을 때 특히 읽기 어렵습니다

마지막 항목 — 색만으로 구분하지 않기 — 은 특히 자주 빠뜨립니다. "완료는 초록, 대기는 노랑" 대신 "완료 ✓ / 대기 ⏳"처럼 글자나 기호를 함께 쓰라고 지시하세요.

핵심 정리 3줄

• "예쁘게"는 지시가 아닙니다. 색·간격·크기·순서 네 가지로 바꿔 말하세요.
• 대비와 최소 글자 크기는 취향이 아니라 기준입니다. 이 둘만 지켜도 대부분의 실패를 피합니다.
• 막히면 여러 안을 요청하세요. 만드는 것보다 고르는 것이 쉽고, 선택권이 여러분에게 옵니다.

용어 정리

• 대비 — 글자와 배경의 밝기 차이. 클수록 읽기 쉽습니다.
• 여백 — 요소들 사이와 안쪽의 빈 공간. 부족하면 답답하고 읽기 어려워집니다.
• 위계(순서) — 무엇을 먼저 보게 할지의 순서. 크기와 진하기로 만듭니다.
• 픽셀(px) — 화면에서 크기를 재는 단위. 본문 글자는 16픽셀 이상을 권합니다.
• 색상 코드 — "#0F1418" 형식으로 색을 정확히 지정하는 표기. 몰라도 말로 지시할 수 있습니다.
• 여러 안 요청 — 만들기 전에 방향 몇 개를 제안받고 고르는 방법.

다음 회차 예고와 실습 과제

14회 「아티팩트로 만드는 실전 디자인」에서는 오늘 배운 네 가지 말로 실제 결과물을 만듭니다. 랜딩 페이지, 정리 문서, 카드, 간단한 대시보드를 하나씩 만들어 보고, 수정 요청을 정확히 하는 법과 화면 크기에 따라 달라지는 문제를 다룹니다.

실습 과제 두 가지

• ① 같은 것을 지시 없이 한 번, 네 가지 지시를 붙여 한 번 만들어 비교해 보세요. 지시한 네 가지가 실제로 지켜졌는지를 기준으로 보시면 됩니다.
• ② 만든 결과물에서 여백만 두 배로 늘려 보세요. 한 가지만 바꿔도 인상이 얼마나 달라지는지 확인하는 것이 목적입니다.

②번을 해 보시고 "여백만 늘렸는데 이렇게 달라지나" 싶으셨다면 댓글로 남겨 주세요. 디자인에서 가장 저평가되는 요소가 여백입니다.

본 회차는 2026년 8월 2일 기준입니다. 아티팩트의 표시 방식은 창구와 버전에 따라 다를 수 있습니다. 화면과 이 글이 다르면 화면이 맞습니다.

협업문의 : kuroicode@gmail.com
블로그 : https://ghost-production-0ec2.up.railway.app/
홈페이지 : https://kuroicode-beep.github.io/svil-homepage/