목표: 노후생활정보를 공유하는 웹사이트 제작
대상: 60~70대 고령자
오늘의 실습 포인트: 기획 문서들(.md 파일)을 만들고 단계별로 제작하기
인사이트: 스스로 정리도 잘 되고, 초보자가 작업 단계를 이해하는 데도 많은 도움이 됨.
진행 방법
🛠 사용한 도구 및 환경
Claude code (터미널 기반 명령어 실행)
Claude MCP (desktop commander 등)
Git (단계별 커밋으로 작업 히스토리 정리)
imagen (이미지 제작)
무료 리소스 사 이트
컴포넌트: daisyUI
아이콘: FontAwesome
📁 문서 제작 순서
prd.md프로젝트 개요, 목표, 기능 설명
plan.md기술스택, 지시사항, 주요 용어 정리 (AI 활용)
design-system.md폰트: Gmarket Sans / Noto Sans Korean
컬러: pastel-colors.png
컴포넌트, 아이콘 가이드 포함
(저작권에 문제 없는 소스를 구체적으로 알려주기)
wireframe.md기본 레이아웃 및 컴포넌트 구성
(와이어프레임은 구성을 미리 보는 데 도움이 되네요.)
claude.md내 작업의 기본 룰과 체크리스트
토큰을 절약하고, 작업을 효율적으로 하기 위해 배운대로 이렇게 정리해봅니다.
깃 커밋을 시작합니다.
새 terminal을 열고 작업 시작
생성된 웹사이트
배운대로 모바일 버전도 체크합니다.
앞으로 해결할 것
가야 할 길은 많지만, 우선!
첫 제작 웹페이지에서 벌써 카테고리, 디자인, 문구, 레이아웃, 수정할 것이 너무 많이 보입니다.
당장 수정하고 싶었는데, limit이 걸리네요..
스터디 다음시간에는 효율적으로 수정해나가는 방법과 노하우를 배워야겠습니다.