Back to Details

design-setup

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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

5c阶段 · 设计配置（design-setup）

문장부호: 출력에 
—
(em-dash)를 쓰지 않는다. 쉼표나 마침표로 끊는다.
标点符号：输出时请勿使用
—
（破折号），请用逗号或句号分隔。

목적

目的

만들기 전에 디자인을 먼저 끝낸다.
화면을 짜면서 색을 고민하면 둘 다 망친다. 코드 짜다가 "이 파란색 맘에 안 드는데" 하고 되돌리기 시작하면 시간이 녹는다. 그리고 프로토타입과 피칭덱의 색이 따로 놀면 팀이 아니라 두 팀이 낸 것처럼 보인다.
그래서 여기서 색·서체·간격을 확정해 
design.md
에 박아둔다. 이후 
prototype-build
와 
pitch-deck-build
는 이 파일을 그대로 가져다 쓰고 내용에만 집중한다.
在开始制作前先完成设计。
如果在搭建界面时才纠结配色，两边都会搞砸。写代码时突然觉得“这个蓝色不顺眼”然后回头修改，只会浪费时间。而且如果原型和演示稿的配色不一致，看起来就像两个团队做出来的东西。
因此在这里确定色彩、字体、间距并写入
design.md
文件中。后续的
prototype-build
和
pitch-deck-build
将直接复用该文件，只需要专注于内容本身。

이 단계의 역할

本阶段的角色分配

주도: Red · 찌르는 사람: Green · Blue는 토큰이 실제로 박혔는지 본다 만들 사람이 정하되, 사용자한테 맞는 톤인지는 Green이 본다.
context.md
의 
팀원
에서 이름을 읽어 세 명 다 부른다. 시작할 때 소리내어 배분한다.
🔴 Red: 주도. 무드 한 단어에서 색·서체를 확정한다. "이 서비스, 무슨 느낌이었으면 좋겠어요? 단어 하나로요." 🟢 Green: 그 톤이 우리 사용자에게 맞는지 본다. "우리가 좋아하는 색 말고, 그 사람이 신뢰할 색은 뭘까요?" 🔵 Blue: 정한 값이 
design.md
에 그대로 박혔는지 확인한다. 여기서 새면 프로토타입과 덱이 따로 논다. "이 색값, 파일에 그대로 들어갔어요?"
한 명에게 쏠리면 찌르는 사람을 이름으로 호명한다. 2인 팀이면 Red는 공동이다.
主导：Red · 监督者：Green · Blue负责检查Token是否正确写入 设计方案由制作者确定，但Green需要确认风格是否符合用户定位。
从
context.md
的「成员」中读出所有三人的名字，开始时大声分配角色。
🔴 Red：主导。从一个风格关键词出发确定色彩、字体。“我们的服务，希望是什么样的感觉？用一个词来形容。” 🟢 Green：确认该风格是否符合目标用户。“不要选我们喜欢的颜色，用户会信任的颜色是什么？” 🔵 Blue：确认确定好的数值是否准确写入
design.md
。这里出错的话，原型和演示稿的风格会脱节。“这个色值，已经正确写入文件了吗？”
如果任务集中在某一人身上，直接喊监督者的名字提醒。如果是2人团队，Red由两人共同担任。

10분이면 끝난다

10分钟即可完成

고민할 게 많아 보이지만 실제로는 무드 하나, 색 하나 고르면 나머지는 따라온다. 오래 끌지 않는다.
看起来需要考虑的事情很多，但实际上确定一个风格、一种主色后，其余内容都会随之确定。不要拖太久。

① 무드: 팀이 고른다

① 风格：团队共同选定

"우리 서비스, 어떤 느낌이었으면 좋겠어요?"
무드어울리는 주제느낌
미니멀·깔끔데이터·정보 중심, 코스 추천신뢰감. 여백이 많고 색이 절제됨
친근·경쾌여행 발견, 젊은 층밝고 둥글둥글. 이모지·컬러 칩
포멀·신뢰무장애, 공공, 지자체 대상차분하고 단정. 파랑·회색 계열
감성·따뜻로컬, 소멸지역, 스토리따뜻한 톤. 세리프 제목도 어울림
"이 중에 우리 페르소나가 좋아할 것 같은 건 뭐예요?" 팀 취향이 아니라 사용자 기준으로 고르게 한다.
“我们的服务，希望是什么样的感觉？”
风格适配主题感受
极简·整洁数据、信息类，课程推荐值得信赖。留白充足，配色克制
亲切·轻快旅行探索，面向年轻群体明亮圆润。搭配表情符号、色卡
正式·可靠无障碍服务，公共领域，地方政府相关沉稳端正。以蓝色、灰色系为主
感性·温暖本地特色，濒危区域，故事类温暖色调。衬线字体标题也适配
“这里面哪一种是我们的用户画像会喜欢的？” 要以用户为标准选择，而非团队喜好。

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

② 配色组合：3~4种颜色足够

색을 많이 쓰면 아마추어처럼 보인다. 메인 1색 + 강조 1색 + 회색 계열이면 끝이다.
주제에서 색을 가져오면 설명도 쉬워진다:
주제메인 색강조 색예시
바다·해안청록 
#0d7377
산호 
#ff6b6b
통영·여수·태안
산·숲·자연딥그린 
#2d6a4f
머스터드 
#f4a261
평창·인제·영월
도심·상권인디고 
#3d5a80
라임 
#98c1d9
부천·수원·종로
미식·로컬테라코타 
#c1584a
크림 
#f4e3c1
전주·담양
역사·문화버건디 
#7b2d43
골드 
#c9a227
안동·경주
웰니스·회복세이지 
#87a878
베이지 
#e8ded1
제천·괴산
"우리 지역·주제 하면 무슨 색이 떠올라요?" 팀이 다른 색을 원하면 그걸 쓴다. 위 표는 막힐 때 꺼내는 보기지 정답이 아니다.
使用过多颜色会显得不够专业。 主色1种 + 强调色1种 + 灰色系就足够了。
从主题延伸配色，也更容易解释：
主题主色强调色示例
海洋·海岸青绿色 
#0d7377
珊瑚色 
#ff6b6b
统营、丽水、泰安
山·森林·自然深绿色 
#2d6a4f
芥末黄 
#f4a261
平昌、仁川、宁越
城市·商圈靛蓝色 
#3d5a80
淡绿色 
#98c1d9
富川、水原、钟路
美食·本地特色赤陶色 
#c1584a
奶油色 
#f4e3c1
全州、潭阳
历史·文化酒红色 
#7b2d43
金色 
#c9a227
安东、庆州
健康·疗愈鼠尾草绿 
#87a878
米色 
#e8ded1
堤川、槐山
“提到我们的地区·主题，会联想到什么颜色？” 如果团队有其他心仪的颜色，就用那个颜色。以上表格只是思路参考，并非标准答案。

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

其余颜色固定（无需纠结）

잉크(글자)   #1f2933      배경   #f6f8fa
뮤트(보조)   #6b7c88      흰색   #ffffff
文字色   #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)
이게 다 정해져 있어서 빌드할 때 디자인 고민을 안 해도 된다. 그게 이 단계의 목적이다.
询问团队只会浪费时间。直接告知就按此标准执行。
  • 字体：仅使用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
로 박아둔다 ★ 산출물

④ 写入
design.md
★ 产出物

정한 걸 바로 쓸 수 있는 CSS로 만들어 저장한다. 
prototype-build
와 
pitch-deck-build
가 이걸 그대로 복사해 쓴다.
markdown
undefined
将确定好的内容制作成可直接使用的CSS并保存。
prototype-build
和
pitch-deck-build
会直接复制使用该文件。
markdown
undefined

우리 팀 디자인

我们团队的设计规范

무드: 감성·따뜻 (소멸지역 로컬 스토리) 근거: 페르소나가 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 하나 만들어 **색 조합을 눈으로 확인시키고** *"이거 맞아요?"* 물어본다. 아니면 그 자리에서 바꾼다.

---
风格：感性·温暖（濒危区域本地故事） 依据：用户画像为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, 모바일에서도 안 깨지게.
  • 仅使用单HTML文件，外部资源仅允许字体CDN（Pretendard）。禁止使用localStorage.
  • 禁止使用图表库（包括Chart.js）。如果演示场地网络中断，图表会完全消失，而这恰好可能是展示数据依据的幻灯片。对比、排名类内容请使用内嵌SVG或CSS柱状图实现。只需要10行代码即可。 （字体设置了
    font-family: Pretendard, system-ui, sans-serif
    的降级方案，即使CDN失效也能正常显示文字，因此字体是唯一例外。）
  • 禁止使用外部图片URL：需支持离线展示。图片请使用CSS渐变、图形、表情符号、内嵌SVG实现。
  • UI使用韩语，确保在移动端也不会错乱。

context.md 갱신

更新context.md

  • 산출물
    에 
    design.md
    . 
    단계: 5c
    .
  • 무드·메인색·이유를 한 줄로 기록 → 이후 스킬이 다시 묻지 않는다.
  • 在「产出物」中添加
    design.md
    ，「阶段：5c」.
  • 用一句话记录风格、主色、选择理由 → 后续技能不会再询问相关内容。

끝맺음

收尾

  • "디자인 끝났어요. 이제 만들 때 색 고민은 안 해도 돼요. 
    design.md
    만 가져다 쓰면 됩니다."
  • 다음은 
    $prototype-build
    : 내용과 기능에만 집중한다.
  • 시간이 남으면:
    • "우리 색 조합, 다른 팀 거랑 나란히 놓으면 구별돼요?"
    • "색맹인 분이 봐도 구분될까요? 색만으로 정보를 주지 않는 게 좋아요."
  • “设计已完成。制作时无需再纠结配色，直接复用
    design.md
    即可。”
  • 下一步是
    $prototype-build
    ：仅专注于内容和功能。
  • 如果还有剩余时间：
    • “我们的配色组合，和其他团队的放在一起能区分开吗？”
    • “色弱用户能区分这些颜色吗？最好不要仅用颜色传递信息。”

자동으로 채우지 않기

禁止自动填充

무드·메인색은 팀이 고른다. AI가 "이 주제엔 보통 파랑이죠" 하고 정해버리지 않는다. 다만 팀이 "몰라요" 라고 하면 붙잡지 않는다. 기본값으로 정하고 넘어간다. 10분짜리 단계다.
风格、主色必须由团队选定。AI不能直接说“这个主题通常用蓝色”来替团队做决定。 但如果团队表示“不知道选什么”，不要纠缠，直接用默认值继续推进。这是一个10分钟就能完成的阶段。

톤

沟通风格

  • 한 턴 = 맥락·이유 1문단 + 질문 1개. 질문만 툭 던지지 말고 왜 이걸 묻는지를 먼저 한 문단으로 친절하게 풀어준다. 대신 질문 개수는 늘리지 않는다. 한 번에 여러 개를 물으면 팀이 생각하지 않고 받아적기만 한다.
  • AI가 이미 아는 답으로 몰지 않는다. 팀 생각이 틀려 보여도 "아닐까요?" "진짜 그럴까요?" 로 흔들지 말고, 무엇을 보면 알 수 있는지를 묻는다.
  • 빨리 끝낸다. 디자인 회의로 한 시간 태우면 정작 만들 시간이 없다. 10분이면 충분하다.
  • 팀이 못 정하면 주제 색을 추천하고 넘어간다. "이걸로 갈게요, 나중에 바꿔도 돼요."
  • 취향 싸움이 붙으면: "우리가 좋아하는 색 말고, 사용자가 신뢰할 색은 뭘까요?"
  • 每次对话 = 背景说明1段 + 1个问题。不要只扔出问题，要先用一段文字亲切解释为什么要问这个问题。但不要增加问题数量。一次问多个问题，团队不会认真思考，只会敷衍回答。
  • 不要用已知答案引导团队。即使团队的想法看起来不对，也不要用“不是这样吧？”“真的是这样吗？”来动摇，而是询问如何才能验证这个想法。
  • 快速推进。如果把设计讨论会开成1小时的会议，真正用来制作的时间就不够了。10分钟足够。
  • 如果团队无法确定，推荐主题相关配色然后推进。“就用这个吧，之后也可以修改。”
  • 如果出现偏好争执：“不要选我们喜欢的颜色，用户会信任的颜色是什么？”