5c단계 · 디자인 세팅 (design-setup)

문장부호: 출력에
—
(em-dash)를 쓰지 않는다. 쉼표나 마침표로 끊는다.

목적

만들기 전에 디자인을 먼저 끝낸다.

화면을 짜면서 색을 고민하면 둘 다 망친다. 코드 짜다가 "이 파란색 맘에 안 드는데" 하고 되돌리기 시작하면 시간이 녹는다. 그리고 프로토타입과 피칭덱의 색이 따로 놀면 팀이 아니라 두 팀이 낸 것처럼 보인다.

그래서 여기서 색·서체·간격을 확정해
design.md
에 박아둔다. 이후

prototype-build

와

pitch-deck-build

는 이 파일을 그대로 가져다 쓰고 내용에만 집중한다.

이 단계의 역할

주도: Red · 찌르는 사람: Green · Blue는 토큰이 실제로 박혔는지 본다 만들 사람이 정하되, 사용자한테 맞는 톤인지는 Green이 본다.

context.md

의

팀원

에서 이름을 읽어 세 명 다 부른다. 시작할 때 소리내어 배분한다.

🔴 Red: 주도. 무드 한 단어에서 색·서체를 확정한다. "이 서비스, 무슨 느낌이었으면 좋겠어요? 단어 하나로요." 🟢 Green: 그 톤이 우리 사용자에게 맞는지 본다. "우리가 좋아하는 색 말고, 그 사람이 신뢰할 색은 뭘까요?" 🔵 Blue: 정한 값이

design.md

에 그대로 박혔는지 확인한다. 여기서 새면 프로토타입과 덱이 따로 논다. "이 색값, 파일에 그대로 들어갔어요?"

한 명에게 쏠리면 찌르는 사람을 이름으로 호명한다. 2인 팀이면 Red는 공동이다.

10분이면 끝난다

고민할 게 많아 보이지만 실제로는 무드 하나, 색 하나 고르면 나머지는 따라온다. 오래 끌지 않는다.

① 무드: 팀이 고른다

"우리 서비스, 어떤 느낌이었으면 좋겠어요?"

무드	어울리는 주제	느낌
미니멀·깔끔	데이터·정보 중심, 코스 추천	신뢰감. 여백이 많고 색이 절제됨
친근·경쾌	여행 발견, 젊은 층	밝고 둥글둥글. 이모지·컬러 칩
포멀·신뢰	무장애, 공공, 지자체 대상	차분하고 단정. 파랑·회색 계열
감성·따뜻	로컬, 소멸지역, 스토리	따뜻한 톤. 세리프 제목도 어울림

"이 중에 우리 페르소나가 좋아할 것 같은 건 뭐예요?" 팀 취향이 아니라 사용자 기준으로 고르게 한다.

② 색 조합: 3~4색이면 충분하다

색을 많이 쓰면 아마추어처럼 보인다. 메인 1색 + 강조 1색 + 회색 계열이면 끝이다.

주제에서 색을 가져오면 설명도 쉬워진다:

주제	메인 색	강조 색	예시
바다·해안	청록 `#0d7377`	산호 `#ff6b6b`	통영·여수·태안
산·숲·자연	딥그린 `#2d6a4f`	머스터드 `#f4a261`	평창·인제·영월
도심·상권	인디고 `#3d5a80`	라임 `#98c1d9`	부천·수원·종로
미식·로컬	테라코타 `#c1584a`	크림 `#f4e3c1`	전주·담양
역사·문화	버건디 `#7b2d43`	골드 `#c9a227`	안동·경주
웰니스·회복	세이지 `#87a878`	베이지 `#e8ded1`	제천·괴산

"우리 지역·주제 하면 무슨 색이 떠올라요?" 팀이 다른 색을 원하면 그걸 쓴다. 위 표는 막힐 때 꺼내는 보기지 정답이 아니다.

나머지는 고정 (고민할 필요 없다)

잉크(글자)   #1f2933      배경   #f6f8fa
뮤트(보조)   #6b7c88      흰색   #ffffff

③ 나머지는 기본값으로 (묻지 않는다)

팀에게 물어봐야 시간만 간다. 그냥 이렇게 간다고 알려준다.

서체: Pretendard 한 종류 (CDN). 본문 16px, 줄높이 1.6
글자 크기: 12 / 14 / 16 / 20 / 26 / 34px
간격: 4의 배수 (4/8/12/16/24/32/48). 여백을 넉넉히: 빽빽하면 촌스럽다
모서리: 12px 둥글게
그림자: 은은하게 한 겹만
```
0 1px 6px rgba(0,40,70,.08)
```

이게 다 정해져 있어서 빌드할 때 디자인 고민을 안 해도 된다. 그게 이 단계의 목적이다.

④

design.md

로 박아둔다 ★ 산출물

정한 걸 바로 쓸 수 있는 CSS로 만들어 저장한다.

prototype-build

와

pitch-deck-build

가 이걸 그대로 복사해 쓴다.

markdown

# 우리 팀 디자인

무드: 감성·따뜻 (소멸지역 로컬 스토리)
근거: 페르소나가 40~50대 가족 여행자라 신뢰감 있고 따뜻한 톤

```css
:root {
  --primary: #7b2d43;   /* 버건디, 안동 고택의 색 */
  --accent:  #c9a227;   /* 골드 */
  --ink:     #1f2933;
  --muted:   #6b7c88;
  --bg:      #f6f8fa;
  --card:    #ffffff;

  --radius: 12px;
  --shadow: 0 1px 6px rgba(0,40,70,.08);
  --space:  4px;  /* 배수로 사용: 8 12 16 24 32 48 */
}
body { font-family: Pretendard, system-ui, sans-serif;
       font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--bg); }
```

글자 크기: 12 / 14 / 16 / 20 / 26 / 34px

팀에게 색을 실제로 보여준다. 색 이름만 말하면 감이 안 온다. 작은 HTML 하나 만들어 색 조합을 눈으로 확인시키고 "이거 맞아요?" 물어본다. 아니면 그 자리에서 바꾼다.

제약 (바뀌지 않는다)

단일 HTML 파일, 외부는 폰트 CDN(Pretendard)만. localStorage 금지.
차트 라이브러리 금지(Chart.js 포함). 발표장 네트워크가 끊기면 차트가 통째로 사라지는데, 하필 그게 데이터 근거 슬라이드다. 비교·순위는 인라인 SVG 또는 CSS 막대로 그린다. 10줄이면 된다. (폰트는
```
font-family: Pretendard, system-ui, sans-serif
```
폴백이 있어 CDN이 죽어도 글자는 뜬다. 그래서 폰트만 예외다.)
외부 이미지 URL 금지: 오프라인에서 떠야 한다. 이미지는 CSS 그라디언트·도형·이모지·인라인 SVG로.
한국어 UI, 모바일에서도 안 깨지게.

context.md 갱신

```
산출물
```
에
```
design.md
```
.
```
단계: 5c
```
.
무드·메인색·이유를 한 줄로 기록 → 이후 스킬이 다시 묻지 않는다.

끝맺음

"디자인 끝났어요. 이제 만들 때 색 고민은 안 해도 돼요.
design.md
만 가져다 쓰면 됩니다."
다음은
```
$prototype-build
```
: 내용과 기능에만 집중한다.
시간이 남으면:
- "우리 색 조합, 다른 팀 거랑 나란히 놓으면 구별돼요?"
- "색맹인 분이 봐도 구분될까요? 색만으로 정보를 주지 않는 게 좋아요."

자동으로 채우지 않기

무드·메인색은 팀이 고른다. AI가 "이 주제엔 보통 파랑이죠" 하고 정해버리지 않는다. 다만 팀이 "몰라요" 라고 하면 붙잡지 않는다. 기본값으로 정하고 넘어간다. 10분짜리 단계다.

톤

한 턴 = 맥락·이유 1문단 + 질문 1개. 질문만 툭 던지지 말고 왜 이걸 묻는지를 먼저 한 문단으로 친절하게 풀어준다. 대신 질문 개수는 늘리지 않는다. 한 번에 여러 개를 물으면 팀이 생각하지 않고 받아적기만 한다.
AI가 이미 아는 답으로 몰지 않는다. 팀 생각이 틀려 보여도 "아닐까요?" "진짜 그럴까요?" 로 흔들지 말고, 무엇을 보면 알 수 있는지를 묻는다.
빨리 끝낸다. 디자인 회의로 한 시간 태우면 정작 만들 시간이 없다. 10분이면 충분하다.
팀이 못 정하면 주제 색을 추천하고 넘어간다. "이걸로 갈게요, 나중에 바꿔도 돼요."
취향 싸움이 붙으면: "우리가 좋아하는 색 말고, 사용자가 신뢰할 색은 뭘까요?"

design-setup

NPX Install

Tags

SKILL.md Content