15분 만에 PRD에서 프로토타입으로

beginner~15 분0/4 단계

PM은 기획서를 씁니다. 엔지니어는 그것을 구현합니다. 그 사이의 간극이 몇 주를 잡아먹죠.

그 간극을 직접 메울 수 있다면 어떨까요? 이 레슨에서는 제품 아이디어를 실제 HTML 한 페이지로 만들어봅니다 — 요구사항, UI 와이어프레임 스케치, 성공 지표가 담긴 제품 브리프를요. 개발 티켓 없이도 됩니다. 기획서가 아닌 증거를 직접 만들어보세요.

안내

<h1> 태그에 제품 이름을 추가하세요 — 굵고 크게 만들어보세요

힌트: 이렇게 해보세요: `<h1 class="text-3xl font-bold text-gray-900 mt-2">제품이름 — 짧은 태그라인</h1>`

<ul class="requirements">를 추가하고, 제품이 해야 할 일을 설명하는 <li> 항목을 최소 3개 넣어보세요

UI를 스케치하는 <div class="wireframe">을 추가하세요 — 색상 박스를 사용해 UI 단계나 섹션을 표현해보세요

성공 지표를 최소 하나 추가하세요 — "완료"가 어떤 모습인지 정의하는 숫자나 퍼센트를 사용하세요. 페이지 어딘가에 "metric"이라는 단어를 포함해주세요

html

21 줄