[포트폴리오] 아날로그 감성을 웹으로, 소품 편집샵 'Little Things' 웹사이트 제작 (인터랙티브 웹)
안녕하세요, '둥둥'입니다. 🍂
오늘은 단순히 정보를 보여주는 것을 넘어, **'분위기(Mood)'**를 전달하는 데 집중한 웹사이트 포트폴리오를 소개합니다.
이번 프로젝트의 주제는 **"작지만 확실한 행복을 파는 감성 소품 편집샵"**입니다. 가상의 브랜드 이름은 'Little Things(리틀 띵스)'. 망원동 골목 어귀에 있을 법한 따뜻한 가게를 상상하며 만들었습니다.
※ Check: 이 사이트는 저의 웹 개발 실력과 디자인 감각을 보여드리기 위해 기획/제작한 **'개인 포트폴리오용 가상 사이트'**입니다.
🖋️ 프로젝트 컨셉: Digital Analog (디지털로 구현한 아날로그)
"사각거리는 연필 소리와 종이의 질감을 웹사이트에 담을 수 있을까?"
이 질문에서 시작했습니다. 차가운 모니터 화면 속에서도 따뜻한 감성을 느낄 수 있도록, 서체는 클래식한 명조 계열(Playfair Display)을 사용하고, 전체적인 톤 앤 매너를 차분하게 잡았습니다.
💻 주요 구현 기능 & 기술 (Technical Focus)
이번 프로젝트는 **사용자의 스크롤 경험(Scroll Experience)**을 극대화하는 인터랙티브 기술에 중점을 두었습니다.
1. 감성적인 비디오 배경 (Video Hero Section) 접속하자마자 브랜드의 분위기를 단번에 느낄 수 있도록, 정적인 이미지 대신 잔잔한 영상이 배경으로 재생되도록 구현했습니다. 모바일 환경까지 고려하여 로딩 속도 최적화도 놓치지 않았습니다.
2. 스크롤 시퀀스 애니메이션 (Sticky Scroll) 'Collection' 섹션이 가장 큰 특징입니다. 사용자가 스크롤을 내리면 왼쪽의 이미지는 고정된 상태에서 오른쪽 텍스트만 부드럽게 바뀌거나, 스크롤에 따라 이미지가 착착 넘어가는 '스토리텔링형 스크롤' 기능을 구현하여 몰입감을 높였습니다.
3. 섬세한 마이크로 인터랙션 화면에 요소가 나타날 때마다 부드럽게 떠오르는 효과(Fade-up)와, 저널 리스트에 마우스를 올렸을 때의 반응 등 사용자에게 "웹사이트가 살아있다"는 느낌을 주는 디테일을 추가했습니다.
데스크탑, 모바일 화면
🖥️ 결과물 직접 확인하기
가을 햇살 같은 따스함이 느껴지는 웹사이트, 아래 링크에서 직접 경험해 보세요. (PC와 모바일 모두 지원합니다.)
👉 [Little Things 샘플 사이트 구경하기] https://changjunyun.github.io/sample_test3/
📷 이미지/영상 출처 (Media Sources)
본 포트폴리오의 완성도를 높여준 이미지와 영상 소스는 저작권 걱정 없는 Pixabay와 Pexels의 무료 라이선스 자료를 활용했습니다.
🤝 제작 의뢰 및 문의
"우리 가게의 감성을 그대로 옮겨놓은 홈페이지가 필요하신가요?"
- 카페, 공방, 편집샵 등 감성적인 브랜드
- 단순히 예쁜 것을 넘어, 기술적인 인터랙션이 들어간 웹사이트
- 모바일에서도 완벽하게 보이는 반응형 홈페이지
단순 코딩이 아니라, 브랜드의 결을 이해하고 그것을 웹으로 구현해 드립니다. 제작 비용이나 기간 등 궁금한 점은 언제든 편하게 문의주세요.
[카카오톡 1:1 제작 문의] 👇👇👇 https://open.kakao.com/o/sizsMV9h
여러분의 소중한 브랜드에 따뜻한 온기를 불어넣어 드리겠습니다. 감사합니다!