플러스프로젝트 배경
랜딩 한 장은 잘 만들기 쉽습니다. 어려운 것은 페이지가 17개로 늘어났을 때도 같은 품질이 유지되는가입니다. 페이지가 많아지면 간격이 2px씩 어긋나고, 버튼 높이가 페이지마다 달라지고, 결국 사이트가 여러 사람이 따로 만든 것처럼 보입니다. 그래서 이 작업의 목표는 화려한 한 장이 아니라 '17개 페이지가 한 사람이 만든 것처럼 보이는 것'으로 잡았습니다. 공통 컴포넌트와 간격 값을 토큰으로 먼저 묶
프로젝트 성과
17개 페이지가 한 규칙을 공유하는 구조
홈, 브랜드 소개, 제품 목록, 제품 상세 5종, 매장 찾기, FAQ, 공지, 제품 등록, 고객지원, 로그인, 회원가입, 약관, 개인정보처리방침이 모두 실제 페이지로 존재하고 서로 연결됩니다.
간격·타이포·버튼 규
간격·타이포·버튼 규
핵심 기능
지역 필터와 목록이 함께 움직이는 매장 찾기
지도만 크게 띄우는 매장 찾기는 실제로는 잘 안 쓰입니다. 사용자가 원하는 것은 '내 지역에 어디가 있나'이므로, 지역 필터와 목록을 한 화면에서 함께 움직이게 하고 상세 정보는 목록 안에서 펼치도록 했습니다.
진행 단계
정보구조 → 공통 토큰 정의 → 17페이지 구현 → 전 페이지 렌더 확인
2026.08.
1) 사이트맵과 페이지별 목표를 먼저 확정(제품 상세 5종의 서술 순서 포함)
2) 간격·타이포·컴포넌트 토큰을 정의하고 그 밖의 임의 값을 금지
3) 17개 페이지 퍼블리싱, 매장 찾기의 필터·목록 연동 구현
4)
2) 간격·타이포·컴포넌트 토큰을 정의하고 그 밖의 임의 값을 금지
3) 17개 페이지 퍼블리싱, 매장 찾기의 필터·목록 연동 구현
4)
프로젝트 상세
유아용 모빌리티(유모차·카시트) 브랜드의 전체 사이트를 17개 페이지로 구성한 자체 제작 포트폴리오입니다. 'MOVA'는 이 작업을 위해 만든 가상 브랜드이며, 제품명·문구·로고·사진·영상은 모두 새로 제작했습니다. 랜딩 한 장이 아니라 운영되는 사이트 한 벌입니다. 홈, 브랜드 소개, 제품 목록, 제품 상세 5종, 매장 찾기, FAQ, 공지, 제품 등록, 고객지원, 로그인, 회원가입, 이용약관, 개인정
