본문으로 건너뛰기
프로킷

3장. 디자인 고르기

이번 장에서 할 일

에이전트가 추천한 디자인 스타일 1~3위 중에서 하나를 골라요. 대표 색(버튼처럼 눈에 띄는 곳에 쓰는 색)과 서비스 이름, 첫 화면 문구도 정해요. 고른 스타일은 DESIGN.md라는 파일로 저장되고, 모든 화면이 이 규칙을 따라요.

1. 추천 스타일 살펴보기

에이전트는 세 카탈로그(Refero Styles, awesome-design-md, getdesign.kr)에서 서비스에 어울리는 스타일을 골라 1~3위로 보여 줘요. "카탈로그 없이 직접 정하기"도 함께 나와요. 후보마다 스타일 이름, 주소, 고른 이유가 있어요.

주소를 브라우저로 열어 분위기를 직접 보세요. 설명이 더 필요하면 물어보세요.

프롬프트에이전트 대화창에 붙여 넣기

후보마다 어떤 느낌인지, 우리 서비스의 첫 화면에 어떻게 쓰일지 더 설명해줘.

도움말

고루는 Monzo(Refero Styles), 당근 SEED(getdesign.kr), Monarch(Refero Styles)를 추천받아 1위 Monzo를 골랐어요.

2. 고르기

마음에 드는 번호로 답하면 돼요. Claude Code는 선택지 창을 띄우니 방향키로 고르세요(답하는 법).

프롬프트에이전트 대화창에 붙여 넣기

1위로 해줘.

후보가 마음에 들지 않으면 다른 계열을 더 받아 보세요. 카탈로그를 직접 둘러보고 고르는 법은 다듬기에 있어요.

프롬프트에이전트 대화창에 붙여 넣기

다른 스타일 후보 3개를 더 보여줘. 이번에는 더 따뜻하고 부드러운 쪽으로.

3. 대표 색 정하기

에이전트가 스타일 원본의 색을 그대로 쓸지, 서비스에 맞게 바꿀지 추천해요. 원본 색이 그 브랜드를 너무 닮았거나 서비스 분위기와 맞지 않으면 바꾸자고 해요.

프롬프트에이전트 대화창에 붙여 넣기

대표 색은 추천대로 해줘.

프롬프트에이전트 대화창에 붙여 넣기

대표 색은 따뜻한 주황빛 빨강으로 해줘. 그 색 버튼 위의 흰 글자도 잘 읽히게.

도움말

고루는 Monzo의 원래 색(산호색) 대신 에이전트 추천대로 조금 깊은 홍시색 #c9421d로 바꿨어요. 흰 글자를 올려도 잘 읽히는 진하기예요.

4. 이름과 첫 화면 문구 정하기

이름을 정하지 않았으면 에이전트가 후보를 함께 내요. 같은 이름의 서비스가 있는지도 확인해 달라고 하세요.

프롬프트에이전트 대화창에 붙여 넣기

이름 후보 중 2번으로 할게. 같은 이름의 앱이나 서비스가 있는지 확인해줘.

고루는 같이살림에서 Evenly로 이름을 바꿨다가, 같은 분야 앱이 앱 스토어에 있는 걸 찾아 다시 후보를 받아 고루가 됐어요.

이렇게 되면 성공

  • 스타일, 대표 색, 이름이 정해졌어요. 에이전트는 4장의 화면 설계 확인까지 답을 받은 뒤에 DESIGN.md를 저장해요.

막히면
  • 말한 브랜드가 카탈로그에 없대요: 정상이에요. 에이전트는 세 카탈로그에 있는 스타일만 써요. 비슷한 후보를 골라 달라고 하세요.

  • 어떤 걸 골라야 할지 모르겠어요: 1위로 해줘가 기본이에요. 다 만든 뒤에도 다듬기로 바꿀 수 있어요.

에이전트가 물어보면

질문답
스타일 1~3위 중 무엇으로 할지번호. 모르겠으면 1위로 해줘
대표 색을 그대로 쓸지 바꿀지추천대로 해줘 또는 원하는 색
이름과 첫 화면 문구 후보마음에 드는 번호. 직접 정해도 돼요

이 쪽을 다 했나요?