페탈스는 주문 제작 케이크 서비스를 제공하는 가상의 업체로, 아임웹을 통해 제작된 웹사이트 입니다. 메인 페이지에는 다양한 제품 사진을 사용하여, 페탈스만의 고급스럽고 사랑스러운 분위기를 잘 표현하고 있습니다. 웹사이트의 디자인은 직관적이고 사용자 친화적으로 구성되어 있어, 고객들이 필요한 정보를 쉽고 빠르게 찾을 수 있습니다. 화면 상단의 네비게이션 바를 통해 모든 메뉴를 바로 확인하고 접근할 수 있도록 코드 작업을 통해 2줄로 배치했습니다. 모바일 환경에서는 한 눈에 모든 메뉴가 들어올 수 있도록 메뉴 버튼을 터치하면 전체 화면을 차지하는 메뉴 팝업이 뜨도록 하여 사용자가 편리하게 페이지를 확인할 수 있도록 했습니다. 메인 화면 뿐만 아니라 다른 페이지에서도 최적화된 반응형 웹/모바일 디자인을 적용하여, 어떤 기기로 접속하더라도 깨끗하고 보기 좋은 웹사이트 경험을 제공합니다. 고급스러움, 깔끔함, 사랑스러움이라는 요소를 통해 브랜드 이미지를 강화하면서 마이크로 인터랙션을 통해 사용자가 화면에 오래 머무르게 하였고, 사용자가 원하고자 하는 정보를 바로 얻을 수 있는 웹사이트를 만들고자 했습니다.
-
[개발]
1. 커스터마이징 코드를 통해 웹 버전에서는 2줄로 나타나는 메인 메뉴를, 모바일 버전에서는 버튼을 클릭 할 때에만 현재 화면을 100% 차지하는 nav 메뉴 모달을 구현했습니다.
2. 로고 위 마우스를 올릴 시 텍스트 색, 로고 각도 변경 효과, 마우스를 따라다니는 로고와 같은 마이크로 인터랙션을 구현하여 깔끔하지만 사용자로 하여금 재미를 느낄 수 있도록 했습니다.
3. '페탈스'라는 하이엔드 케이크 제작 스튜디오의 이미지와 결이 맞는 고급스러운 느낌을 주기 위해 전체적으로 톤다운 됐지만 달콤함과 사랑스러운 느낌을 줄 수 있는 웹/모바일 커스텀 디자인을 적용했습니다.
4. 'Custom-made cakes'에서 단계 별 진행 단계를 나타내는 인디케이터를 사용하면서, 입력한 값이 유효성 검사를 통과할 때에만 다음 단계로 넘어갈 수 있는 로직을 작성했습니다.
포트폴리오를 불러오고 있어요
