Day 15: Figma 디자인을 HTML/CSS로 구현한 웹 개발 경험

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

초보 웹 개발자 (HTML/CSS 기초 학습자)

핵심 요약

• 반응형 레시피 웹페이지 구현: Figma 디자인을 기반으로 HTML/CSS로 반응형 레이아웃을 구성하고, margin, padding을 사용해 섹션 간 시각적 분리 구현
• 세마틱 HTML 적용:
  ,
  ,
  등 의미 있는 태그 사용으로 접근성 및 코드 가독성 강화
• GitHub Pages 배포: /docs 폴더를 활용한 정적 페이지 배포, 상대 경로 사용 시 주의사항 강조 (/docs 외 경로는 작동하지 않음)

섹션별 세부 요약

1. **구현 내용 요약**

• 라이브 데모 및 저장소 링크 공개
• 레이아웃 구조: 반응형 디자인 적용 (576px 이하 화면 최적화)
• 2차 시도: 이전 코드 참조 없이 재구성하여 레이아웃 계획 및 세마틱 HTML 실습

2. **학습 내용 요약**

• 디자인 → 코드 전환: Figma 디자인을 HTML/CSS로 구현하며 구조, 간격, 시각적 일관성 확보
• CSS 우선순위: 레이아웃 구조 설정 → 스타일링 순으로 작업하여 중복 코드 최소화
• 반응형 디자인: @media 쿼리 사용으로 모바일 최적화 방법 학습

3. **배포 및 실전 팁**

• GitHub Pages 사용: react 프로젝트 배포 경험 재사용, /docs 폴더 활용
• 경로 설정 주의사항: /docs 외 폴더의 상대 경로는 작동하지 않음 (디버깅 필요)

4. **성찰 및 개선 방향**

• 첫 시도 시간: 1일 소요 (단순 페이지로 보였지만 복잡도 높음)
• 두 번째 시도 성과: 2시간 만에 반응형 기능 완성, 반복 학습의 중요성 인식
• 향후 계획: 다음 디자인으로 이어가며 실전 경험 확대

결론

• 핵심 팁: 반복적 실습이 핵심이며, GitHub Pages 배포 시 /docs 폴더 내 자산 배치가 필수 (상대 경로 오류 예방)
• 실무 적용: 세마틱 HTML과 반응형 디자인 기반으로 웹 개발 기본 역량 강화 가능