4 / 9약 35분입문

첫 화면 — 목록과 빈 상태

데이터 없이 ‘모양’부터. 사용자가 보는 첫인상

이 장을 끝내면

목표 슬라이스

아직 DB 연결 없음. 화면에 가짜(샘플) 글 2개와, 빈 목록 UI를 만듭니다. ‘저장’은 다음 장.

완료 조건:
[ ] / 접속 시 사이트 제목과 짧은 설명이 보인다
[ ] 샘플 카드 2장이 보인다 (제목·한 줄)
[ ] 샘플을 끄면 ‘아직 없음 + 올리기 유도’가 보인다
[ ] 브라우저 폭을 좁혀도 가로 스크롤이 없다

디자인 최소 규칙 (지금 당장)

더 깊은 내용은 /learn/frontend-design 시리즈. 지금은 이것만.

shadcn을 쓰는 이유 (초보 버전)

버튼·카드를 처음부터 그리지 않아도 됩니다. 접근성 기본이 어느 정도 들어 있는 부품을 프로젝트에 복사해 씁니다. 에이전트에게 ‘shadcn Button/Card만 사용’이라고 하세요.

에이전트에게 복붙

이 Next 프로젝트에 shadcn init이 필요하면 절차를 안내하고, Button Card Badge를 추가한 뒤 홈에 샘플 결과물 카드 2개를 배치해줘. 가짜 데이터는 파일 상수로. 완료 조건은 내가 / 에서 카드 2개를 보는 것.

빈 상태도 기능이다

데이터가 없을 때 하얀 화면이면 사용자는 ‘고장’으로 느낍니다. ‘아직 없음’ + ‘첫 글 올리기’ 버튼이 있어야 합니다.

지금 하기

확인 방법 (사람 할 일)

에이전트 ‘완료’ 후 당신이 합니다.

막히면

완료 조건: [ ] / 접속 시 사이트 제목과 짧은 설명이 보인다 [ ] 샘플 카드 2장이 보인다 (제목·한 줄) [ ] 샘플을 끄면 ‘아직 없음 + 올리기 유도’가 보인다 [ ] 브라우저 폭을 좁혀도 가로 스크롤이 없다

이 Next 프로젝트에 shadcn init이 필요하면 절차를 안내하고, Button Card Badge를 추가한 뒤 홈에 샘플 결과물 카드 2개를 배치해줘. 가짜 데이터는 파일 상수로. 완료 조건은 내가 / 에서 카드 2개를 보는 것.