screen-plan

Original：🇺🇸 English
Translated

흑백 HTML 와이어프레임 기반 화면 기획 스킬. "화면 기획", "와이어", "화면 설계", 화면 ID(O1/M1 등), "이 화면 만들어줘" 같은 의도가 보이면 발동.

28installs
Sourcemerryiscat/runmagotchi
Added on

NPX Install

npx skill4agent add merryiscat/runmagotchi screen-plan

Tags

Translated version includes tags in frontmatter
screen-planninghtml-wireframeui-designresponsive-designwireframe-prototyping

SKILL.md Content

View Translation Comparison →

screen-plan

화면 기획을 흑백 HTML 와이어프레임으로 작성·수정하는 보편 스킬.

발동 조건

다음 의도가 보이면 발동:
  • "화면 기획", "화면 설계", "와이어", "와이어프레임", "스크린"
  • 화면 ID 언급 (O1, M1, E1 등)
  • "이 화면 만들어줘", "메인 화면 어떻게 생길지" 등

1. 작업 절차 — 새 화면 작성

① 기존 화면 전수 읽기 (필수, 생략 금지)

새 화면을 만들기 전에 반드시 다음을 수행한다:
  1. 화면 디렉토리의 모든 HTML 파일을 읽는다.
  2. 다음 패턴을 파악하고 메모한다:
    • 프레임 유형 (
      frame--web
      , 
      frame--app
      등)
    • 네비게이션 구조 (GNB, topbar 등)
    • 레이아웃 패턴 (컬럼 수, 섹션 구조)
    • 컴포넌트 사용 관례 (버튼, 입력, 카드 등)
    • 카피 톤 (문체, 길이, 용어)
  3. 새 화면은 기존 화면과 동일한 패턴을 따른다. 의도적으로 다르게 만들어야 할 이유가 있으면 사이드 노트 "의도"에 명시한다.
이 단계를 건너뛰면 화면 간 결이 달라지는 문제가 반복된다.

② 도메인 규칙 참조

프로젝트에 도메인 규칙 문서(
README.md
, 기획 문서 등)가 있으면 반드시 읽고 따른다. 금지어, 공개/비공개 필드, 카피 규칙 등은 스킬이 아닌 프로젝트 문서가 권위.

③ ID·영역 결정

영역 prefix + 순번. 새 영역이 필요하면 사용자에게 확인.

④ 메타 블록 작성

각 화면 HTML 상단에 
.meta
블록으로 명시:
  • ID + 이름 + 한 줄 목적
  • 진입점 (어디서 어떻게 들어오나)
  • 다음 (어디로 나가나, 분기 조건)
  • 권한·상태 가정
  • 작성일

⑤ 화면 본문 작성

  • 기존 화면에서 파악한 패턴을 그대로 적용
  • 실제 카피·실제 구조 사용. lorem ipsum 금지
  • 사용자 데이터는 중괄호 토큰 
    {이름}
    , 
    {거리}
    등
  • 공용 CSS·컴포넌트가 있으면 재사용

⑥ 사이드 노트 작성

3섹션 고정:
  • 의도: 왜 이 구조·카피인가
  • 대안: 다른 옵션 / 보류된 안
  • 미정: 결정 못한 항목

⑦ 인덱스 갱신

화면 목록 파일(
index.html
등)에 항목 추가.

2. 작업 절차 — 기존 화면 수정

  1. 해당 HTML 직접 편집
  2. 진입점·다음으로 연결된 인접 화면도 점검 (영향 전파)
  3. ID·이름 변경 시 인덱스 갱신

3. 화면 4안 (필수)

새 화면을 기획할 때, 컨셉이 다른 4개 안을 만들어서 보여준다. 직장 상사에게 기획 안건을 올린다고 생각할 것 — 4개 모두 근거 있고 실현 가능하되, 서로 다른 관점에서 문제를 푼다.

구성

  • 보편 2안: 기존 화면 패턴을 기반으로 하되, 서로 다른 컨셉으로 풀어낸 2개. 둘 다 안정적이지만 강조점·정보 위계·사용자 동선이 다르다.
  • 실험 2안: 기존 패턴에 얽매이지 않는 새로운 시도 2개. 구조를 깨거나, 특이한 인터랙션을 제안하거나, 다른 서비스에서 영감을 받은 접근. 단순히 "구조가 다른" 수준이 아니라 아이디어 자체가 다양해야 한다.

추론 순서

  1. 기존 화면 패턴 파악 (①에서 수행). 프레임·레이아웃·컴포넌트·카피 톤.
  2. 이 화면이 풀어야 할 핵심 문제를 정의한다. "사용자가 뭘 하러 오는 화면인가?"
  3. 보편 A: 기존 패턴으로 핵심 문제를 가장 직관적으로 푼다.
  4. 보편 B: 같은 기존 패턴이지만 다른 관점에서 푼다 (강조점 변경, 정보 순서 변경, 동선 변경 등).
  5. 실험 A: 기존 패턴을 벗어난 접근. "만약 ~라면?" 식의 발상.
  6. 실험 B: 실험 A와도 다른 방향의 새로운 시도.

좋은 4안의 기준

  • 4개가 서로 다른 이유를 한 줄로 설명할 수 있어야 한다.
  • "레이아웃만 다른" 4개는 나쁜 4안. 컨셉·관점·사용자 경험이 달라야 한다.
  • 보편도 "무난한 1개를 복사"가 아니라 진짜 다른 접근 2개.
  • 실험도 "이상한 1개를 복사"가 아니라 진짜 다른 아이디어 2개.

산출물

  • 4개를 하나의 HTML 파일에 보편A / 보편B / 실험A / 실험B로 나란히 배치
  • 각 안마다 컨셉 한 줄 (이 안이 다른 안과 뭐가 다른지)
  • 사용자가 선택하면 해당 안을 기반으로 최종 화면 확정. 혼합도 가능.

4. 시각 규칙

  • 흑백만 사용. 회색 6단계: 
    #000 / #333 / #666 / #999 / #ccc / #eee / #fff
  • 그림자·그라데이션·컬러·배경 이미지 금지
  • 구조는 1px solid 보더로 표현
  • 이미지 플레이스홀더: 1px 보더 + 대각선 X + 레이블

5. 반응형

  • 모바일 default → 768px+ → 1024px+
  • 고정 모바일 너비 금지 — 처음부터 반응형

6. 카피 규칙

  • 멘트 최소화. 직관적 UI로 전달
  • 짧고 건조하게. 2~3단어 이내
  • 서술형 문장 금지 ("~해 주세요" 등)
  • 감탄사·이모지·느낌표 금지
  • lorem ipsum 금지 — 실제 라벨만

7. 버전 규칙

  • 화면 HTML은 코드 성격 → 직접 편집
  • 큰 구조 변경 시에만 디렉토리 단위 버전업