3장. 디자인 정하기

이번 장에서 할 일

프리셋 팩(만들 서비스의 화면 구성, 기능 규칙, 디자인 노트, 예시 데이터, 그림을 묶어 둔 폴더)의 디자인 노트(design-notes.md)에 적힌 주소에서 DESIGN.md(색, 글꼴, 간격 규칙을 적은 파일)를 받아 고쳐 써요. 받는 원문은 디자인 카탈로그 Refero Styles에 있는 Claude 스타일이에요. 로그인 전 첫 화면을 잰 것이라 로그인 후 대화 화면에 맞게 고치고, 로고, 주황색, 서체처럼 브랜드를 알아보게 하는 것은 바꿔요.

그다음 홈 화면 구성 세 가지 가운데 하나를 골라요. Claudle의 홈은 처음 온 사람이 보는 소개 쪽(/)이에요. 로그인한 뒤 쓰는 새 대화 화면(/new)은 팩에 정한 배치대로 만들어서 고르지 않아요. 기본은 구성도(고르기 페이지가 직접 그리는 화면 구성 그림)로 고르고, 원하면 시안(comp. 완성 화면을 미리 그린 그림)을 그려서 골라요.

1. DESIGN.md 받아 고치기

2장과 같은 대화창에 보내요.

시안을 그려서 고르고 싶으면 넷째 줄의 시안은 그리지 말고 구성도로 보여 줘.를 시안을 그려서 보여 줘.로 바꿔 보내세요.

배치도는 프리셋 팩에 들어 있는 화면 배치 그림이에요. 새 대화, 대화(오른쪽 미리 보기 창을 연 모습), 휴대폰 대화와 메뉴, 검색 창, 프로젝트, 소개 화면이 있어요. 에이전트는 이런 순서로 일해요.

1. 1.

   브라우저 도구로 Refero 페이지를 열고 "Download DESIGN.md" 버튼으로 받아요. 안 되면 페이지에 있는 원문을 써요.

2. 2.

   "받은 뒤 고칠 것"대로 고쳐요. 바탕과 글자는 대화 화면에 맞춰 라이트와 다크 둘 다 정하고, 강조색은 비슷한 계열의 다른 주황(벽돌색), 서체는 Source Serif 4와 Pretendard, 로고는 서비스 이름 글자로 바꿔요.

3. 3.

   명세 검사기로 확인하고, 원래 서비스 이름과 색 코드가 남지 않았는지 찾아봐요.

고친 내용을 확인하려면 이렇게 물어보세요.

2. 화면 구성 고르기

DESIGN.md를 고치면 에이전트가 서체 파일을 받고, 브라우저에 화면 구성 고르기 페이지를 열어요. 홈 화면 카드 세 장이 나와요. 기본은 카드마다 구성도(에이전트는 배치도나 wireframe이라고 부르기도 해요)가 나오고, 시안을 그리게 했다면 시안이 나와요.

배치는 프리셋 팩의 배치도로 정해져 있어서 세 장은 같은 배치 안에서 세부가 조금씩 달라요. 마음에 드는 카드를 눌러 고르세요.

대화창에 적어 보내도 돼요. 여러 안을 섞고 싶으면 두 번째처럼 보내세요.

고른 다음 4장의 프롬프트를 보내면 모든 페이지를 만들기 시작해요.

더 해 보기

다른 스타일로 바꾸기

[ ] 안의 주소를 표에서 고른 주소로 바꾸세요. 디자인 노트의 "받은 뒤 고칠 것"은 Claude 원문에 맞춘 것이라 쓰지 않아요.

에이전트가 물어보면