플러스프로젝트 배경
1) 문제점 Figma로 제작된 디자인 시안을 실제 웹사이트로 구현해야 하는 상황이었습니다. 브랜드의 전통적인 분위기와 정갈한 이미지를 웹 화면에서도 그대로 살리는 것이 필요했습니다. PC 화면뿐 아니라 태블릿, 모바일 환경에서도 디자인이 깨지지 않도록 반응형 대응이 필요했습니다. 단순 이미지형 페이지가 아니라, 메뉴 동작과 스크롤, 호버 효과 등 기본적인 사용자 인터랙션이 포함되어야 했습니다.
프로젝트 성과
Figma 디자인 기반 웹 구현
제공된 Figma 디자인 시안을 기준으로 메인 페이지를 HTML, CSS, JavaScript로 직접 구현했습니다.
브랜드 분위기 반영
전통 요식업 브랜드의 정갈하고 차분한 분위기가 웹 화면에서도 유지되도록 레이아웃과 스타일을 구성했습니다.
반응형 웹 제작
PC, 태블릿, 모바일 환경에서 화면이 자연스럽게 보이도록 반응형 레이아웃을 적용했습니다.
사용자 인터랙션 구현
호버 메뉴, 서브메뉴, 햄버거 메뉴, 스크롤 동작 등 사용성을 위한 인터랙션을 구현했습니다.
메인 페이지 완성도 개선
메인 페이지 하나로 브랜드의 분위기와 주요 정보를 전달할 수 있도록 섹션 흐름과 화면 구성을 정리했습니다.
핵심 기능
Figma 디자인 기반 퍼블리싱
제공된 디자인 시안을 기준으로 메인 페이지의 레이아웃, 이미지, 텍스트, 여백을 웹 화면에 맞게 구현했습니다.
진행 단계
디자인 분석 및 구조 파악
2025.03.
제공된 Figma 디자인을 확인하고 메인 페이지의 섹션 구성, 레이아웃, 반응형 작업 범위를 정리했습니다.
프로젝트 상세
1) 포트폴리오 소개 전통 요식업 브랜드 규반의 브랜드 웹사이트를 구축한 프로젝트입니다. Figma로 제공된 디자인 시안을 기준으로 HTML5, CSS3, JavaScript를 사용해 메인 페이지를 구현했으며, 브랜드가 가진 전통적인 분위기와 정갈한 이미지를 웹 화면에 자연스럽게 반영하는 데 중점을 두었습니다. 단순한 정적 페이지가 아니라 PC, 태블릿, 모바일 환경에서 모두 안정적으로 보일 수
