ralvarez-ai/website-concept-architect

웹사이트 개념 설계자

개인 사이트, 포트폴리오, 랜딩 페이지를 위한 코드 이전 개념 설계. 이 스킬은 방향을 생성하며, 마크업이 아닙니다. 산출물은 사용자가 선택할 수 있는 소수의 뚜렷한 개념 문서이며, 선택된 문서는 ui-ux-architect로 전달되어 구현됩니다.

사용 시기

사용자가 새 웹사이트를 시작하고 코드 작성 전에 무엇인지 결정하려고 할 때. 작업 중인 사이트의 리디자인에는 사용하지 않으며, '처음부터 다시 생각해봐'라는 브리핑이 있을 때만 예외입니다. 컴포넌트 수준의 UI 결정은 ui-ux-architect에 해당합니다.

1. 운영 원칙 — 한 번에 던지지 말고 걸어가기

여섯 단계를 인터랙티브하게, 한 번에 하나씩 실행합니다. 각 단계 후에 메뉴를 제시하고, 잠시 멈추며, 사용자의 선택을 기다린 후 진행합니다. 여러 단계를 단일 질문으로 통합하지 마세요. 사용자가 정보를 자진해서 제공하더라도 단계를 건너뛰지 마세요 — 사용자가 말한 내용을 미리 선택된 기본값으로 표시하고 확인하세요.

워크스루의 요점은 사용자가 미루었을 결정을 강제로 내리게 하는 것입니다. 단계를 건너뛰면 나중에 모호한 개념 문서가 만들어집니다.

2. 여섯 단계

#	단계	목적	산출물
1	목적	사이트의 목적?	원형 목록에서 1-2개 선택
2	사용자	누가 읽는가?	1-2개 선택, 톤과 밀도 결정
3	콘텐츠 목록	무엇이 있는가?	섹션의 체크된 메뉴
4	톤 & 개성	어떤 느낌인가?	큐레이트된 목록에서 2-3개 형용사
5	시각적 방향	어떻게 보이는가?	1개의 원형 (순위 추천, 전체 목록 표시)
6	종합	개념 문서	2-3개의 뚜렷한 개념 방향 + ASCII 와이어프레임

3. 단계 1 — 목적

다음 원형들을 제시합니다. 사용자는 1-2개를 선택합니다 (조합 가능, 예: 포트폴리오 + 글쓰기 허브):

• 포트폴리오 / 쇼케이스 — 작업 결과물이 중심; 프로젝트가 IA의 핵심 구조.
• 글쓰기 허브 — 에세이 / 블로그 / 노트가 중심; 나머지는 내비게이션.
• 전문 명함 — 단일 페이지 또는 거의 단일 페이지; 채용 담당자 / 클라이언트가 방문, 확인, 연락.
• 디지털 가든 — 상호 연결된 영구 노트; 구조는 네트워크, 연대기가 아님.
• 프로젝트 런처 — 특정 제품이나 프로젝트가 주인공; '소개'는 각주.
• 실험 놀이터 — 사이트 자체가 창의적 결과물; 관행은 적.

사용자가 호환되지 않는 2개의 원형을 선택한 경우 (예: 실험 놀이터 + 전문 명함), 표시하고 홈페이지에서 어떤 것이 우선할지 물어보세요 — 선택받지 못한 것은 하위 섹션이 됩니다.

4. 단계 2 — 사용자

선택은 설명이 얼마나 필요한지와 어떤 목소리가 어울리는지를 결정합니다.

• 채용 담당자 / 클라이언트 — 빠른 스캔, 경력 중심, 전문 용어 최소, 연락처 명확.
• 개발자 동료 / 동료 — 공유된 용어 가정, 밀도 수용, 코드 샘플 적합.
• 친구 / 커뮤니티 — 비형식적, 개성 중심, 내부 농담 허용.
• 과거의 나 / 아카이브 — 과거 검색용, 밀도가 다듬기보다 중요.
• 열린 웹 — 일반 방문자, 자체 설명 필요, SEO 중요.

여러 사용자 층은 정상입니다. 3개 이상 선택하면 홈페이지가 어떤 사용자에 최적화될지 물어보세요 — 나머지는 하위 페이지에서 수용됩니다.

5. 단계 3 — 콘텐츠 목록

이 메뉴를 제시합니다. 사용자는 원하는 것을 체크하고, 사용자 정의 항목을 추가할 것을 제안합니다.

표준 섹션:

• 소개 / 바이오
• 지금 페이지 (현재 집중하는 것)
• 프로젝트 인덱스
• 개별 프로젝트 사례 연구
• 에세이 / 블로그 / 글쓰기
• 노트 / 디지털 가든 / 위키
• 독서 목록 / 책장
• 사용 페이지 (도구, 하드웨어, 설정)
• 이력서 / CV (또는 PDF 링크)
• 연락처 (이메일, 소셜, 폼)
• 뉴스레터 가입
• RSS / Atom 피드
• 변경 로그 (사이트 또는 인생 업데이트)
• 사진 갤러리
• 강연 / 팟캐스트 / 출연
• 방명록 / 웹링 (레트로 웹 미학)

선택된 각 섹션에 대해 하나의 후속 질문: 이 콘텐츠가 이미 존재합니까? 콘텐츠가 없는 섹션은 개념 문서에서 [deferred]로 표시하여 사용자가 빈 페이지를 배포하지 않도록 합니다.

6. 단계 4 — 톤 & 개성

2-3개의 형용사를 선택합니다. 이는 5단계의 시각적 제안과 6단계의 카피 목소리를 결정합니다.

대립 쌍으로 제시하여 선택이 절충을 강제하도록 합니다:

• 미니멀 ↔ 밀집
• 장난스러운 ↔ 진지한
• 따뜻한 ↔ 냉정한
• 날것의 ↔ 세련된
• 내밀한 ↔ 공적인
• 실험적인 ↔ 관습적인
• 빠른 / 스캔 가능 ↔ 사색적인 / 장문
• 자신감 있는 ↔ 자기 비하적인

미니멀 + 장난스러운 + 따뜻한을 선택한 사용자는 밀집 + 진지한 + 냉정한을 선택한 사용자와 완전히 다른 제안을 받습니다. 선택을 그대로 기록합니다 — 나중에 개념 문서의 브리핑이 됩니다.

7. 단계 5 — 시각적 방향

여덟 가지 원형. 적합도에 따라 상위 3개 순위를 매기지만, 전체 목록을 보여주어 사용자가 재정의할 수 있도록 합니다.

원형	느낌	1-4단계에서 적합한 경우...	참고 사이트
터미널 / CLI	고정폭, 희소, 명령줄	개발 사용자, 미니멀, 날것, 아카이브	sive.rs, wiki.nikiv.dev, ratfactor.com
편집 / 스위스	강한 타이포그래피, 그리드, 넉넉한 여백	세련된, 진지한, 전문 명함	rauno.me, paco.me, linear.app
브루탈리스트	날것의 HTML, 기본 스타일, 장식 없음	실험적인, 날것, 내밀한, 개발 사용자	brutalist-web.design, motherfuckingwebsite.com
진 / 맥시멀리스트	콜라주, 혼합 폰트, 겹쳐진 텍스처	장난스러운, 실험적인, 커뮤니티 사용자	cassie.codes, lynnandtonic.com
미니멀 포트폴리오	단일 열, 큰 이미지, 많은 여백	포트폴리오, 세련된, 채용/클라이언트	많은 디자이너 포트폴리오
노트북 / 가든	위키 스타일, 밀집된 상호 링크, 영구적	디지털 가든, 아카이브 사용자, 밀집	gwern.net, andymatuschak.org
매거진 / 이야기	긴 스크롤 내러티브, 아트 디렉션, 히어로 이미지	프로젝트 런처, 사색적인, 열린 웹	pitchfork.com 롱리드, the verge 피처
데이터베이스 / 인덱스	필터 가능한 테이블, 거의 UI	밀집, 아카이브, 많은 아티팩트	are.na 프로필, derek sivers' /now 디렉토리

각 선택에 대해 한 문장 이유를 제시하며 순위를 보여줍니다. 예: "터미널/CLI가 적합한 이유: 개발 사용자 + 미니멀 + 날것을 선택했기 때문입니다." 사용자가 하나를 선택합니다. 순위를 재정의하는 경우 이유를 묻고 기록합니다 (재정의는 이전에 드러나지 않은 제약 조건을 밝혀주는 경우가 많습니다).

8. 단계 6 — 종합

2-3개의 뚜렷한 개념 방향을 생성합니다. 하나만 생성하지 마세요. 사용자가 이미 결정했더라도, 대안은 사용자가 무엇을 절충하고 있는지 드러냅니다.

개념 문서 형태

각 방향에 대해 다음 섹션이 포함된 마크다운 문서를 작성합니다:

# 개념: <이름>

## 한 줄 요약
<15단어 이내의 사이트 설명>

## 브리핑
- 목적: <1단계 선택>
- 사용자: <2단계 선택, 주 사용자 우선>
- 톤: <3단계 형용사>
- 시각적 원형: <5단계 선택>

## 정보 아키텍처
<페이지/섹션 트리, 최대 2단계 깊이>

## 홈페이지 전략
<홈페이지의 역할을 2-3문장으로 — 첫인상, 주요 행동, 방문자가 떠날 때 알게 되는 것>

## 샘플 카피 목소리
<선택된 목소리로 2-3문장 — 소개 섹션 첫 문장, 또는 홈페이지 태그라인 + 부제목>

## 이 개념이 포기하는 것
<다른 개념과 비교하여 우선순위가 낮아진 것에 대한 솔직한 목록 — 모든 개념은 무언가를 포기합니다>

## ASCII 홈페이지 와이어프레임
<§9 참조>

세 방향은 실제 축에서 달라야 하며, 단순히 외형적 변형이 아니어야 합니다:

• 개념 A = 사용자 선택의 명백한 해석
• 개념 B = 주요 사용자에게 더 강하게 최적화 (종종 더 미니멀)
• 개념 C = 의도적인 확장 — 실험 다이얼을 한 단계 더 돌리면 어떻게 될까?

세 가지 중 두 가지가 거의 동일하다면 하나를 제거하고 이유를 설명합니다.

9. ASCII 홈페이지 와이어프레임

개념당 하나씩. 80열 너비 유지, 영역을 [대괄호]로 표시. 상자 그리기 또는 간단한 대시로 계층을 표시합니다.

터미널/CLI 포트폴리오 예시:

+------------------------------------------------------------------------------+
| ~ example.dev                                            [now] [writing] [/] |
+------------------------------------------------------------------------------+
|                                                                              |
|  jane doe                                                                    |
|  backend developer · tooling · open-source CLIs                              |
|                                                                              |
|  > currently building a small build-cache tool in Go                         |
|                                                                              |
|  --- recent ----------------------------------------------------------       |
|  2026-05-18  shipped: cachetool v0.3                                         |
|  2026-05-02  essay:   why I keep my tools in one repo                        |
|  2026-04-21  project: build-cache internals                                  |
|                                                                              |
|  --- projects --------------------------------------------------------       |
|  cachetool           incremental build cache               [→]               |
|  notes               short write-ups on tooling            [→]               |
|                                                                              |
+------------------------------------------------------------------------------+
| email · github · rss                                                         |
+------------------------------------------------------------------------------+

와이어프레임은 비율과 계층에 관한 것이며, 픽셀 레이아웃이 아닙니다. 색상, 폰트, ASCII 외의 아이콘 없음. 섹션이 설명을 필요로 하면 와이어프레임 아래에 한 줄 메모를 추가하세요.

10. 안티 패턴

• "사용자가 이미 말했으니까" 단계를 건너뛰기. 사용자의 입력을 기본값으로 표시하고 확인하세요. 가정하지 마세요. 가치의 절반은 사용자가 말하지 않은 것을 보도록 강제하는 데 있습니다.
• 2-3개 대신 하나의 개념 문서. 대안은 사용자가 선택하는 것을 이해하는 방법입니다. 단일 개념 출력은 실패한 실행입니다.
• 톤이 고정되기 전에 시각적 원형 결정. 단계 순서가 중요합니다 — 시각적 방향은 목적/사용자/톤의 하위에 있으며, 병렬이 아닙니다.
• [deferred] 섹션에 콘텐츠 채우기. 사용자가 에세이를 작성하지 않았다면 주제 목록을 발명하지 마세요 — 개념 문서는 구조에만 약속합니다.
• 구현 세부사항이 포함된 와이어프레임. "여기에 shadcn Card 사용" 없음 — 그것은 ui-ux-architect의 역할입니다. 와이어프레임은 무엇이 어디에 있는지 보여줍니다.
• 일반적인 제안. "깨끗한 현대적 포트폴리오"는 개념이 아닙니다. 모든 개념 문서는 모든 축에서 특정 선택에 약속해야 합니다.

11. 인계

사용자가 2-3개 개념 중 하나를 선택하면, 개념 문서는 다음을 위한 브리핑이 됩니다:

• ui-ux-architect — 토큰, 컴포넌트, 접근성, 네 가지 필수 상태.
• 내장 frontend-design 스킬 — 프로덕션 수준으로 가는 경우 실제 코드.

개념 문서는 디자인 근거로 남을 수 있도록 프로젝트 저장소에 저장되어야 합니다 (예: docs/concept.md).

12. 스킬 간 연결

• ui-ux-architect — 구현 수준 표준; 이 스킬이 브리핑을 제공합니다.
• demo-presentation-architect — 유사한 인터랙티브 워크스루 구조, 다른 도메인.
• demo-script-architect — 내러티브 원칙 (사용자 우선, 점진적 공개)이 홈페이지 카피에도 적용됩니다.