23-1 융합콘텐츠학과 졸업 프로젝트를 위해 퍼스널 컬러에 따른 룩 북 웹 페이지를 개발하였습니다.
HTML, CSS, JavaScript를 활용하였습니다.
다음 링크에서 시연해보실 수 있습니다. https://ekgus9701.github.io/23-1_GraduateProject/index.html
퍼스널컬러와 코디 콘텐츠에 관심이 많은 MZ세대가 자신의 퍼스널컬러에 맞는 코디를 편하게 찾아볼 수 있는 룩 북 웹페이지를 제작하는 것이다. MZ 세대는 각자의 개성을 중시하기 때문에 개인의 퍼스널컬러에 맞는 코디를 찾아 입기를 선호한다. 또한, MZ세대들은 룩 북을 보고 코디를 따라 입으면서 기존에 가지고 있는 아이템을 활용하는 다양한 방법을 알아낼 수 있고, 이를 통해 쉽게 사고 가볍게 버리는 소비는 감소하고 지속 가능한 패션 문화를 형성할 수 있다.
웹 페이지에 사용되는 퍼스널컬러 타입은 사계절 퍼스널컬러 타입을 사용하였으며, 사계절 내에서도 색 온도, 명도, 청탁에 따라 3가지로 나누어 총 12가지의 퍼스널컬러 타입 코디들이 존재하도록 하였다. 화면은 계절 별로 코디들을 배치해두었으며, 색 온도, 명도, 청탁에 따라서는 필터링 기능을 이용하여 나누어 볼 수 있도록 하였다. 또한, 편리하게 코디를 찾게 하기 위해 색깔 검색기능, 하의 필터링 기능을 이용하였다. 웹 페이지는 파스텔 톤의 색감을 사용하여 코디가 직관적으로 사용자의 눈에 띄도록 하였다. 또한, masonry 레이아웃을 사용하여 각각의 요소가 동적으로 배치되도록 하였고 다양한 크기와 형태의 콘텐츠를 효과적으로 표현할 수 있도록 하였다. 게다가, 브라우저의 크기에 따라 요소들이 유연하게 조정되어 최적의 화면을 구성하고 시각적인 흥미를 유발할 수 있었다. 추가적으로, ‘찜’ 기능을 도입하여 사용자가 마음에 드는 코디를 ‘찜’ 화면에 저장한 후 나중에 다시 볼 수 있도록 하였고 저장 기능을 도입하여 원한다면 사용자의 로컬에 저장할 수 있도록 하였다.
- masonry 레이아웃을 이용한 코디 브라우징
- 퍼스널 컬러 필터링 기능
- 색깔 검색 기능
- 하의 필터링 기능
- 코디 찜 기능
- 코디 크게 보기 기능
- 코디 로컬 저장 기능
- SNS 공유 기능
-
spring 화면
-
찜 화면
-
크게보기 화면
-
크게 보기 실행 화면
