클로드 기초 및 활용 14회: 아티팩트로 만드는 실전 디자인 — 페이지·문서·카드·대시보드
이제 실제로 만들어 봅니다
13회에서 색·간격·크기·순서라는 네 가지 말을 배웠습니다. 오늘은 그 말로 실제 결과물을 만듭니다.
네 가지를 만들어 볼 겁니다. 소개 페이지, 정리 문서, 카드 묶음, 간단한 대시보드입니다. 각각 쓰임이 다르고, 지시할 때 신경 쓸 점도 다릅니다.
오늘의 목표
오늘이 끝나면 할 수 있게 되는 것: 용도에 맞는 결과물 형태를 고르고, 처음부터 제대로 나오게 하는 지시문을 쓰고, 마음에 안 드는 곳을 정확히 지적해 고칠 수 있게 됩니다. 그리고 휴대폰과 다크모드에서 깨지지 않게 만들 수 있습니다.
시작 전에 — 지시문 뼈대
모든 실습에서 공통으로 쓸 뼈대입니다. 12회에서 배운 대로 메모장에 저장해 두고 대괄호만 바꿔 쓰세요.
"[무엇]을 만들어 주세요. 여기에 들어갈 내용은 [내용]입니다. 가장 먼저 보여야 할 것은 [핵심]입니다.
디자인 기준: 색 세 가지까지(배경·글자·강조), 대비 높게, 본문 16픽셀 이상, 여백 넉넉하게, 휴대폰에서도 깨지지 않게."
뒤 문단은 항상 같습니다. 앞 문단만 바꾸면 됩니다.
① 소개 페이지 만들기
가게, 동호회, 개인 프로필처럼 "이게 무엇인지 알리는" 목적의 페이지입니다.
소개 페이지의 핵심은 맨 위입니다. 사람들은 위에서부터 보고, 대개 몇 초 안에 계속 볼지 결정합니다. 그래서 맨 위에 한 문장 설명과 다음에 할 행동이 있어야 합니다.
요청 예: "동네 독서모임 소개 페이지를 만들어 주세요. 맨 위에 모임 한 줄 소개와 '참여 신청' 버튼을 크게 두고, 그 아래 모임 시간·장소·분위기 설명을 차례로요. 가장 먼저 보여야 할 것은 한 줄 소개입니다. (디자인 기준 붙이기)"
소개 페이지에서 흔한 문제
문제: 맨 위 영역이 화면을 다 차지해서 아래 내용이 안 보입니다.
수정: "맨 위 영역의 높이를 줄여 주세요. 화면의 절반을 넘지 않게요."
문제: 버튼이 어디 있는지 눈에 안 띕니다.
수정: "버튼에만 강조색을 쓰고, 나머지는 무채색으로 해 주세요."
두 번째 수정이 13회에서 배운 '강조색 하나'의 실제 용법입니다. 강조색을 여러 곳에 쓰면 버튼이 묻힙니다.
② 정리 문서 만들기
회의록, 매뉴얼, 조사 결과처럼 읽는 것이 목적인 결과물입니다. 소개 페이지와는 필요한 것이 정반대입니다.
정리 문서에서 중요한 것은 구조입니다. 제목 단계가 분명하고, 한 덩어리가 너무 길지 않고, 훑어보면 어디에 뭐가 있는지 보여야 합니다.
요청 예: "아래 메모를 정리 문서로 만들어 주세요. 큰 제목·중간 제목 두 단계만 쓰고, 한 문단은 세 줄을 넘기지 마세요. 중요한 결론은 각 절 맨 앞에 두세요. (디자인 기준 붙이기)"
"한 문단 세 줄 이내" 같은 제약이 문서에서는 특히 효과적입니다. 긴 문단은 확대 화면에서 읽기가 훨씬 어렵습니다.
③ 카드 묶음 만들기
항목이 여럿이고 서로 비교되는 내용일 때 좋습니다. 메뉴판, 요금제 비교, 팀 소개 같은 것입니다.
카드의 생명은 일관성입니다. 카드마다 길이와 구조가 다르면 어수선해 보입니다.
요청 예: "다음 세 가지 요금제를 카드로 비교해 주세요. 카드마다 같은 구조로 — 이름, 가격, 특징 세 줄, 버튼 순서로요. 설명 길이도 비슷하게 맞춰 주세요. 추천 항목 하나에만 강조 표시를 해 주세요. (디자인 기준 붙이기)"
"같은 구조로"와 "길이도 비슷하게"가 핵심 지시입니다. 이게 없으면 카드가 제각각이 됩니다.
④ 간단한 대시보드 만들기
숫자 몇 개를 한눈에 보여 주는 화면입니다. 매출 현황, 진행률, 재고 같은 것요.
대시보드에서 가장 흔한 실패는 숫자를 너무 많이 넣는 것입니다. 열 개가 있으면 하나도 안 보입니다.
요청 예: "이번 달 현황 대시보드를 만들어 주세요. 가장 중요한 숫자 세 개를 맨 위에 크게 두고, 나머지는 아래에 작게요. 숫자마다 무엇을 뜻하는지 라벨을 반드시 붙여 주세요. (디자인 기준 붙이기)"
대시보드에서 특히 조심할 것
13회에서 말한 "색만으로 구분하지 않기"가 대시보드에서 가장 자주 깨집니다. 빨강은 나쁨, 초록은 좋음 같은 표현이 자연스럽게 나오기 때문입니다.
다음 지시를 꼭 붙이세요.
"상태를 색으로만 표시하지 말고, 반드시 글자 라벨을 함께 붙여 주세요. 예: 초록색 점만 찍지 말고 '정상'이라고 적기."
색 구분이 어려운 분에게는 이 한 줄이 읽을 수 있느냐 없느냐를 가릅니다.
수정 요청을 정확히 하는 세 가지 방법
① 위치로 지목: "맨 위 제목만", "세 번째 카드만", "버튼 영역만"
② 항목으로 지목: "여백만", "글자 크기만", "강조색만"
③ 방향과 정도를 함께: "두 배로", "절반으로", "한 단계만 크게"
셋을 합치면 이렇게 됩니다. "세 번째 카드의 여백만 두 배로 늘려 주세요. 다른 건 그대로요."
10회에서 배운 "나머지는 그대로 두세요"를 항상 붙이는 것을 잊지 마세요.
화면 크기 문제 다루기
컴퓨터에서 잘 나온 것이 휴대폰에서 깨지는 일이 흔합니다. 가로로 나열한 것이 화면을 넘어가기 때문입니다.
미리 지시하면 대부분 해결됩니다.
"좁은 화면에서는 가로로 나열된 항목이 세로로 쌓이게 해 주세요. 가로 스크롤이 생기지 않게요."
가로 스크롤은 특히 나쁜 신호입니다. 화면을 확대해 쓰는 환경에서는 가로 스크롤이 생기면 읽기가 거의 불가능해집니다.
밝은 화면과 어두운 화면 둘 다 대응하기
사람마다 기기 설정이 다릅니다. 어두운 모드를 쓰는 사람의 화면에서 흰 배경 결과물이 뜨면 눈이 부십니다.
이 지시를 붙이세요.
"밝은 모드와 어두운 모드 양쪽에서 다 잘 보이게 만들어 주세요. 어느 쪽에서도 대비가 충분해야 합니다."
또는 한쪽으로 확실히 고정하는 방법도 있습니다. "배경을 짙은 회색으로 고정하고 밝은 글자를 쓰세요." 어중간한 것보다 이쪽이 나은 경우도 많습니다.
따라 하기 ① 소개 페이지
앞의 뼈대를 써서 소개 페이지를 하나 만들어 보세요. 주제는 아무거나 좋습니다.
만든 뒤 확인할 것: 맨 위에서 이게 무엇인지 알 수 있는가, 다음에 뭘 해야 하는지 보이는가.
따라 하기 ② 같은 내용을 카드로
같은 대화에서 이렇게 요청합니다.
"같은 내용을 카드 묶음 형태로 다시 만들어 주세요. 카드마다 같은 구조로요."
같은 내용이 형태에 따라 얼마나 다르게 읽히는지 비교해 보세요. 어느 쪽이 이 내용에 맞는지 판단하는 감각이 생깁니다.
따라 하기 ③ 좁은 화면 확인
만든 결과물을 브라우저 창을 좁혀서 확인해 보세요. 창 가장자리를 잡아 폭을 줄이면 됩니다.
깨진다면 "좁은 화면에서 세로로 쌓이게 해 주세요"로 고치세요. 이 확인 습관 하나가 나중에 큰 문제를 막아 줍니다.
따라 하기 ④ 네 방향 제안받기
13회에서 배운 방법을 실전에 적용합니다.
"이 페이지의 시각적 방향을 서로 다른 네 가지로 제안해 주세요. 각각 배경색·강조색·전체 인상을 한 줄로요. 제가 고르면 그것만 만들어 주세요."
고른 뒤 만들어진 결과가, 처음에 아무 생각 없이 만든 것과 얼마나 다른지 보세요. 선택 한 번의 값어치가 거기서 드러납니다.
자주 겪는 오류 ① "내용이 사라졌어요"
디자인을 크게 바꾸라고 했을 때, 내용 일부가 빠지는 경우가 있습니다.
예방: "디자인만 바꾸고 내용은 하나도 빠뜨리지 마세요"를 붙이세요.
발견 시: 10회에서 배운 버전 되돌리기로 돌아간 뒤 다시 요청하세요.
오류 ② "글자가 배경에 묻혀요"
대비 문제입니다. 이렇게 지적하세요.
"[어느 부분]의 글자가 배경에 묻힙니다. 대비를 훨씬 높여 주세요. 필요하면 배경을 더 어둡게, 글자를 더 밝게요."
"안 보여요"라고만 하면 어디가 안 보이는지 모릅니다. 위치를 함께 알려 주세요.
오류 ③ "요청할수록 복잡해져요"
수정을 거듭하면 요소가 계속 늘어나는 경향이 있습니다. 그림자, 테두리, 아이콘, 애니메이션이 하나씩 붙습니다.
이럴 땐 빼는 요청을 하세요.
"장식 요소를 절반으로 줄여 주세요. 그림자와 테두리를 없애고, 색도 최소한만 남겨 주세요."
대개 덜어 낸 쪽이 낫습니다. 이건 디자인의 오래된 원칙이기도 합니다.
오류 ④ "만든 걸 실제로 쓰려면 어떻게 하나요"
아티팩트 안의 결과물을 밖으로 꺼내는 방법은 10회에서 다뤘습니다. 복사·내려받기·공유입니다.
다만 웹 화면 형태의 결과물을 실제 인터넷 주소로 올리는 것은 별개의 일입니다. 파일을 받아 웹 서버에 올려야 하는데, 이건 이 시리즈의 범위를 넘습니다.
대신 공유 링크로 보여 주는 것은 지금 바로 됩니다. 대부분의 경우 그걸로 충분합니다.
실전 사례 ① 발표 자료 대신 쓰는 한 장 요약
발표용 슬라이드를 만들 시간이 없을 때, 한 장짜리 요약 화면이 대안이 됩니다.
"이 내용을 한 화면에 들어가는 요약으로 만들어 주세요. 큰 숫자 세 개를 위에, 그 아래 결론 세 줄. 스크롤 없이 한 화면에 다 보이게요. (디자인 기준 붙이기)"
"스크롤 없이 한 화면에"라는 제약이 좋은 요약을 만들어 냅니다. 공간이 제한되면 중요한 것만 남기게 되니까요.
실전 사례 ② 반복 쓰는 양식 만들기
매번 같은 형식으로 정리해야 하는 것이 있다면, 양식 자체를 만들어 두는 방법이 있습니다.
"주간 보고 양식을 만들어 주세요. 항목은 완료·진행·계획 세 개, 각 항목 아래 빈칸이 세 줄씩. 인쇄해서 손으로 적을 수도 있게 여백을 넉넉히요."
이렇게 만든 것을 내려받아 매주 재사용하면 됩니다. 12회에서 배운 자산화가 결과물에도 적용되는 셈입니다.
실전 사례 ③ 저시력 사용자를 위한 결과물 만들기
본인이 볼 결과물을 만들 때는 처음부터 자기 환경에 맞춰 지시하는 것이 좋습니다. 나중에 확대해서 보는 것보다 훨씬 편합니다.
권하는 지시문:
"저는 화면을 크게 확대해서 봅니다. 본문은 20픽셀 이상, 제목은 그보다 훨씬 크게. 배경은 짙은 색, 글자는 밝은 색으로 대비를 아주 강하게. 한 줄에 글자가 너무 길게 늘어지지 않게 폭을 제한해 주세요. 가로 스크롤은 절대 생기지 않게요."
여기서 "한 줄 폭 제한"이 의외로 중요합니다. 화면이 넓으면 한 줄이 아주 길어지는데, 그러면 다음 줄 첫 글자를 찾기가 어려워집니다. 확대 환경에서는 이 문제가 심해집니다.
그리고 가로 스크롤 금지는 확대 사용자에게는 타협할 수 없는 조건입니다. 세로 스크롤은 익숙하지만, 가로로도 움직여야 하면 읽기가 두 배로 힘들어집니다.
핵심 정리 3줄
- 용도마다 필요한 것이 다릅니다. 소개 페이지는 첫 화면, 문서는 구조, 카드는 일관성, 대시보드는 절제입니다.
- 수정은 위치 + 항목 + 정도로 지목하세요. "세 번째 카드의 여백만 두 배로, 나머지는 그대로."
- 좁은 화면과 어두운 모드를 미리 지시하세요. 나중에 발견하면 고칠 곳이 많아집니다.
용어 정리
- 첫 화면 영역 — 페이지 맨 위, 스크롤 없이 보이는 부분. 여기서 무엇인지 알 수 있어야 합니다.
- 카드 — 항목 하나를 담는 네모난 덩어리. 여러 개를 나란히 놓아 비교합니다.
- 대시보드 — 핵심 숫자를 한눈에 보여 주는 화면. 숫자가 적을수록 잘 보입니다.
- 세로로 쌓기 — 좁은 화면에서 가로 배치를 세로로 바꾸는 것.
- 가로 스크롤 — 좌우로 밀어야 내용이 보이는 상태. 접근성 관점에서 피해야 합니다.
- 한 줄 폭 제한 — 한 줄이 너무 길어지지 않게 제한하는 것. 읽기 쉬움에 크게 기여합니다.
다음 회차 예고와 실습 과제
15회 「나만의 디자인 규격 고정하기」에서는 오늘의 문제를 근본적으로 해결합니다. 매번 디자인 기준을 적는 대신 파일로 굳혀 두고 계속 쓰는 방법입니다. SVIL의 고대비 다크 표준을 실제 사례로 보여 드리고, 접근성 기준을 규격에 넣는 법까지 다룹니다. 제3부의 마지막 회차입니다.
실습 과제 두 가지
- ① 같은 내용을 소개 페이지와 카드 묶음 두 형태로 만들어 비교해 보세요. 어느 쪽이 그 내용에 맞는지 판단해 보시는 게 목적입니다.
- ② 만든 결과물에서 브라우저 창을 좁혀 깨지는지 확인하고, 깨진다면 고쳐 보세요.
②번에서 가로 스크롤이 생겼던 사례가 있다면 어떤 요소 때문이었는지 댓글로 남겨 주세요. 반복되는 원인이 몇 가지로 정리되면 다음 회차 규격에 넣겠습니다.
본 회차는 2026년 8월 2일 기준입니다. 아티팩트의 표시 방식과 내보내기 기능은 창구·버전·요금제에 따라 다를 수 있습니다. 화면과 이 글이 다르면 화면이 맞습니다.
협업문의 : kuroicode@gmail.com
블로그 : https://ghost-production-0ec2.up.railway.app/
홈페이지 : https://kuroicode-beep.github.io/svil-homepage/