Feihong Design System

프리미엄 브랜드 디자인 시스템 · 워크플로 매뉴얼

이 문서는 Feihong Design System의 운영 체제입니다. 요구사항에서 결과물까지의 완전한 프로세스를 정의합니다.

미션: 예술적으로 정제되고, Feihong 브랜드로 인식 가능하며, 명백히 인간이 만든 것처럼 보이는 작업물을 생성합니다. 절대 AI가 만든 것처럼 보이지 않아야 합니다.

10가지 장면 · 텐 신

10가지 장면 모두 프로덕션 준비가 완료되었으며, 각각 완전한 명세서와 템플릿을 제공합니다.

번호	장면	명세서	템플릿	핵심 특징
01	포트폴리오 / 개인 사이트	`scenes/portfolio.md`	`assets/portfolio.html`	비대칭 히어로, 벤토 그리드, 왁스 씰, 에디토리얼 느낌
02	랜딩 페이지	`scenes/landing.md`	`assets/landing.html`	전환 중심, 타임라인, 스피커, CTA 양식
03	튜토리얼 / 장문 / 블로그	`scenes/tutorial.md`	`assets/tutorial.html`	드롭 캡, 읽기 진행률, 목차, 북 퀄리티 타이포그래피
04	프레젠테이션 데크 / 슬라이드	`scenes/deck.md`	`assets/deck.html`	전체 화면, 16:9, 키보드 탐색, 9가지 레이아웃, F 전체 화면
05	사례 연구 / 프로젝트 회고	`scenes/case-study.md`	`assets/case-study.html`	내러티브 아크, 데이터 시각화, 다크 패널
06	콘솔 / 관리자	`scenes/console.md`	`assets/console.html`	관리자 대시보드, 사이드바 탐색, 터미널 그린, KPI 카드, 데이터 차트
07	소셜 카드 / 샤오홍슈	`scenes/cards.md`	`assets/cards.html`	3:4 세로형, 페이지네이션, html2canvas PNG 내보내기
08	이력서 / CV	`scenes/resume.md`	`assets/resume.html`	A4 인쇄, 단일 페이지, 애니메이션 없음, Ctrl+P PDF
09	위챗 아티클	`scenes/wechat.md`	인라인 HTML	위챗 인라인 스타일, 외부 CSS/JS 없음
10	이메일 / EDM	`scenes/email.md`	`assets/email.html`	테이블 레이아웃, 인라인 스타일, Outlook 호환

활성화 조건

시스템은 요청이 다음 시나리오와 일치할 때 자동으로 활성화됩니다.

트리거 키워드	장면 유형
개인 홈페이지, 개인 웹사이트, 포트폴리오, 작품집, 작품 전시, 프로젝트 전시	포트폴리오
랜딩 페이지, 방문 페이지, 이벤트 페이지, 등록 페이지, 강의 페이지, 출시 페이지	랜딩
튜토리얼, 교육, 교양, 블로그, 기사 페이지, 장문, 칼럼	튜토리얼
프레젠테이션, 슬라이드, 데크, 강연, 공유회	데크
사례 연구, 케이스 스터디, 프로젝트 회고, 디자인 과정	사례 연구
관리자 콘솔, 기능 페이지, 대시보드, 도구 페이지	콘솔
소셜 카드, 샤오홍슈, 위챗 모멘츠 사진	카드
이력서, CV, 경력	이력서
이메일 템플릿, EDM, 뉴스레터, 구독 이메일	이메일
공식 계정 레이아웃, 위챗 아티클	위챗

적응형 판단: 간단한 수정(예: "버튼 색상 변경", "섹션 추가")의 경우 빠른 패스를 사용합니다. 새 페이지/전체 디자인의 경우 전체 8단계 프로세스를 사용합니다.

⚡ 빠른 패스 (간단한 수정)

적용 대상:

기존 페이지의 사소한 변경
단일 컴포넌트 조정, 텍스트 교체, 색상 조정
피드백 후 국소적 수정
단일 섹션 추가

프로세스:

기존 HTML 파일 읽기
DNA.md 표준에 따라 변경 사항 적용
변경 사항과 관련된 P0 항목에 대해 빠른 검증
변경 사항이 색상/타이포그래피/레이아웃에 영향을 미치는 경우 → 관련 P0 항목 확인
전달

빠른 패스 불가: 새로운 전체 페이지, 3개 이상의 섹션에 걸친 변경, 색상 팔레트 조정, 전체 스타일 변경.

📋 Feihong 8단계 프로세스

1단계 — 발견 (적응형 분류)

시작하기 전에 사용자 입력에서 이미 알려진 정보를 빠르게 평가합니다.

유형 명확? (10가지 장면 중 어느 것?)
대상 명확? (누구를 위한 것인가?)
규모 확인? (몇 개의 화면/페이지/카드/슬라이드?)
자산 사용 가능? (카피/이미지/데이터/아바타/IP 캐릭터)
제약 조건 명확? (필수 사항, 브랜드 파트너, 금지 요소)

결정 규칙:

4개 이상 명확 → 3단계로 건너뜀
2-3개 명확 → 누락된 중요 질문만 함
0-1개 명확 → 2단계로 진입하여 전체 명확화

2단계 — 정의 (필요시 명확화)

기계적으로 5가지 질문을 모두 하지 마십시오. 1단계에 따라 누락된 중요 질문만 하십시오.

확인할 핵심 질문 (누락된 것만 선택):

유형 (불확실한 경우): 개방형 질문 대신 2-3개의 가장 가능성 있는 옵션 제시
대상 (언급되지 않은 경우): "주요 대상은 누구인가요?"
규모 (명시되지 않은 경우): "대략 몇 개의 화면/페이지/카드인가요?"
자산 (카피가 제공되지 않은 경우): "준비된 카피, 이미지 또는 데이터가 있나요?"
제약 조건 (특별한 요구사항이 있는 경우): "필수 요소나 파트너 브랜드 색상이 있나요?"

커뮤니케이션 원칙: 디자이너가 고객과 대화하듯이, 양식을 작성하는 것처럼 하지 마십시오. 자연어를 사용하고, 한 번에 최대 2-3개의 질문만 하십시오.

3단계 — DNA 주입 (명세서 읽기)

필수 읽기 (모든 프로젝트):

DNA.md — 다음 핵심 사항을 암기:
- 🔴 정확한 색상 값: #0A2463 (로열 블루 55%), #F4D35E (빈티지 골드 30%), #D8315B (버건디 와인 15%)
- 🔴 타이포그래피 전략: Playfair Display (세리프 제목) + Inter (산세 본문) + Cormorant Garamond (이탤릭 인용문) + JetBrains Mono (코드)
- 🔴 우선 순위: 안티-AI > 예술적 품질 > 인간적인 따뜻함 > 디자이너의 안목
- 🔴 따뜻한 크림 배경 #FDFBF6, 잉크 블랙 텍스트 #0D1225
- 🔴 주요 금지 항목
- 🔴 MOTION.md의 모션 언어 (이징, 지속 시간, 원칙)

선택적 읽기 (장면 유형별) — 작업 전에 해당 장면 명세서를 읽음:

번호	장면	명세서	템플릿
01	포트폴리오 / 개인 사이트	`scenes/portfolio.md`	`assets/portfolio.html`
02	랜딩 페이지	`scenes/landing.md`	`assets/landing.html`
03	튜토리얼 / 장문	`scenes/tutorial.md`	`assets/tutorial.html`
04	데크 / 프레젠테이션	`scenes/deck.md`	`assets/deck.html`
05	사례 연구	`scenes/case-study.md`	`assets/case-study.html`
06	콘솔 / 관리자	`scenes/console.md`	`assets/console.html`
07	소셜 카드	`scenes/cards.md`	`assets/cards.html`
08	이력서 / CV	`scenes/resume.md`	`assets/resume.html`
09	위챗 아티클	`scenes/wechat.md`	인라인 HTML
10	이메일 / EDM	`scenes/email.md`	`assets/email.html`

읽은 후에는 다음 5가지 사항을 명확히 해야 합니다:

이 장면의 일반적인 구조/리듬은 무엇인가?
기술적 제약 사항이 있는가? (이메일 테이블, 위챗 인라인 스타일, 데크 전체 화면)
세 가지 브랜드 색상이 이 장면에서 어떤 역할을 하는가?
핵심 감정적 톤은 무엇인가? (엄숙한? 역동적인? 전문적인? 예술적인?)
장면별 금기 사항이 있는가?

4단계 — 구조 구축 (시작점 선택)

기본 전략: 템플릿에서 시작하고, 처음부터 작성하지 않습니다.

10가지 장면 템플릿 — 적절한 템플릿에서 시작하고, 절대 처음부터 작성하지 않습니다:

번호	장면	템플릿	특별 참고 사항
01	포트폴리오	`assets/portfolio.html`	프로젝트 그리드, 시각 우선, 비대칭 히어로, 왁스 씰
02	랜딩	`assets/landing.html`	CTA 중심, 시각적 인상, 타임라인, 양식 상호작용
03	튜토리얼	`assets/tutorial.html`	장문 독서, 목차 탐색, 진행 막대, 드롭 캡
04	데크	`assets/deck.html`	전체 화면 슬라이드, 키보드 탐색, 16:9, F 전체 화면
05	사례 연구	`assets/case-study.html`	컨텍스트→도전→과정→결과 내러티브, 데이터 시각화
06	콘솔	`assets/console.html`	관리자 대시보드, 사이드바 탐색, 터미널 그린, KPI 카드, 데이터 차트
07	소셜 카드	`assets/cards.html`	3:4 세로 페이지네이션, html2canvas PNG 내보내기
08	이력서	`assets/resume.html`	A4 단일 페이지, 인쇄 친화적, Ctrl+P PDF
09	위챗	인라인 HTML	위챗 호환, 인라인 스타일, 외부 CSS/JS 없음
10	이메일	`assets/email.html`	테이블 레이아웃, 인라인 스타일, Outlook 호환

템플릿에서 벗어나야 하는 경우:

템플릿 구조가 실제로 맞지 않는 경우 (단, CSS 변수, 글꼴 가져오기, 기본 재설정은 유지해야 함)
사용자가 명시적으로 독특한 디자인 접근 방식을 요청하는 경우
브랜드 토큰 (:root CSS 변수), 글꼴 가져오기, 기본 재설정 스타일은 항상 유지되어야 함

템플릿 수정 원칙:

템플릿 :root CSS 변수 유지
글꼴 <link> 태그 유지
콘텐츠 영역 교체, 레이아웃 구조 조정
기본 스타일 재설정 제거하지 않음

5단계 — 컴포넌트 편성 (방향 설정 및 레이아웃)

AI의 일반적인 출력에 대항하는 가장 중요한 단계입니다. 이 단계는 결과물이 "디자인"인지 "조립"인지를 결정합니다.

컴포넌트를 채우기 전에 4가지 방향 결정을 정의합니다.

5a. 감정적 톤 (1-2개의 기본 톤 선택)

안정적인 권위: 넉넉한 여백, 로열 블루 지배, 골드는 절제된 사용, 세리프 헤드라인, 최소한의 애니메이션
역동적인 창의성: 골드와 버건디가 더 활동적, 비대칭 레이아웃, 컨테이너를 깨는 요소, 약간 더 많은 애니메이션
예술적 에디토리얼: 큰 이미지, 시각적 요소로서의 텍스트, 컨테이너를 넘치는 이미지, 넉넉한 여백, 다크 패널
따뜻한 휴머니즘: 더 많은 Cormorant 이탤릭, 약간 더 높은 버건디 비율, 따뜻한 톤, IP 캐릭터 등장
정제된 미니멀리즘: 절제된 색상, 넉넉한 여백, 더 높은 Inter 비율, 기하학적 정밀함

5b. 히어로 전략 (1개 선택)

시각 주도: 큰 이미지 / IP / 추상적인 시각물을 기본으로, 최소한의 텍스트
타이포그래피 주도: 큰 헤드라인 + 인용문을 기본으로, 시각적 요소는 보조
초상화 주도: 아바타 / IP 캐릭터를 중심으로, 텍스트는 옆에
데이터/성과 주도: 큰 숫자 + 레이블을 기본으로, 신뢰 구축

5c. 시그니처 요소 (페이지 전체에 1-2개 선택하여 적용)

골드 장식선 (헤드라인 아래)
큰 장식용 숫자 / 영어 (낮은 불투명도 배경)
세리프 이탤릭 인용문
IP 캐릭터 / 아바타 산재
목록 / 타임라인 마커용 골드 점
컨테이너를 넘치는 이미지
리듬을 깨는 딥 블루 패널
Feihong 시그니처 컬렉션 요소 (왁스 씰, 포토 코너, 플뢰롱 ❦, 드롭 캡, 큰 인용문)

5d. 리듬 계획

총 화면/페이지 수: ___
밀도 리듬: 조밀→성김→조밀→성김? 또는 강함→약함→강함?
시각적 서프라이즈 화면은 어디에 배치할 것인가?
다크 패널? 어디에?

방향 출력: 이것을 기록할 필요는 없지만, 마음속에 명확히 해야 합니다. 이후의 레이아웃과 컴포넌트 선택은 이 방향을 따릅니다.

그런 다음 각 섹션/페이지에 대해 components/14-layouts.md에서 레이아웃 패턴을 선택합니다.

핵심 원칙: 모든 섹션은 다른 레이아웃을 사용해야 합니다. 레이아웃 선택은 5a-5d에서 설정된 방향을 지원합니다.

6단계 — 시그니처 (컴포넌트 채우기)

components/ 파일에서 적절한 컴포넌트를 선택합니다.

🔴 하드 규칙 (P0 수준): HTML 기본 스타일 사용 금지.

구체적인 기본 스타일 금지 요구 사항:

❌ 기본 <blockquote> (왼쪽 테두리는 Notion/Feishu 일반)
❌ 기본 border-left 인용 블록
❌ 스타일 없는 <ul>/<ol> (사용자 정의 필수 — 골드 점, 세리프 숫자, 사용자 정의 아이콘)
❌ 기본 <table> 테두리
❌ 기본 파란색 밑줄 링크
❌ 기본 버튼 스타일 (회색, 3D 효과, 기본 테두리)
❌ 기본 입력 스타일
❌ 기본 양식 컨트롤 스타일
✅ 모든 컴포넌트는 컴포넌트 라이브러리에서 선택
✅ 라이브러리에 없는 컴포넌트: DNA.md와 일관되게 디자인, 브라우저 기본값 절대 사용 금지

브랜드 주입 체크포인트:

링크: 로열 블루 #0A2463, 호버 시 골드 밑줄 / 배경 색조
버튼: 기본 로열 블루, CTA 버건디, 보조 골드 외곽선/채움
인용 블록: 큰 골드 세리프 인용문 + Cormorant 이탤릭 + 골드 장식선
목록 마커: 골드 점 또는 Playfair Display 세리프 숫자
태그/뱃지: 골드 채움 (보조), 버건디 채움 (강조), 로열 블루 밝은 배경 (카테고리)
헤드라인: Playfair Display 세리프, 선택적으로 아래에 골드 장식 짧은 선
구분선: 단순한 border-bottom이 아님; 골드 얇은 선 + 그래디언트 페이드 또는 골드 점 구분자 사용
애니메이션 (있는 경우): 가볍고, 느리고, 절제된, cubic-bezier(0.16, 1, 0.3, 1), 바운스 없음

Feihong 시그니처 컬렉션 — 모든 장면에 강력히 권장:

드롭 캡 (튜토리얼 첫 번째 단락)
여백 메모 (튜토리얼 사이드 노트)
왁스 씰 (포트폴리오 / 인증 느낌)
포토 코너 (포트폴리오 / 에디토리얼 느낌)
골드 서명 (기사 끝 / 소개 페이지)
플뢰롱 ❦ (섹션 구분자)
N° 시리얼 배지 (번호가 매겨진 항목, 한정판 느낌)

7단계 — 정제 (품질 자체 점검)

이것은 가장 중요한 단계입니다. 건너뛰지 마십시오.

QUALITY.md + DNA.md 품질 게이트 표준을 항목별로 확인합니다.

🔴 P0 — 인증 필수 (하나라도 통과하지 못하면 반드시 수정)

...

[번역을 위해 잘림]

ifeihong/feihong-design-system

feihong-design-system란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서