Project Workflow
01
Client Meeting & Requirements
- 제주 웨딩스냅/영상 전문업체 특성 파악
- 타겟 고객 분석 (예비부부)
- 브랜드 컨셉 '당신의 색감' 이해
- 경쟁사 분석
02
Planning & Strategy
- 사이트 구조 설계 (IA)
- 모바일 우선 전략 수립
- 콘텐츠 구성 계획
- 기술 스택 결정 (HTML, SCSS, JavaScript)
03
Design
- 브랜드 아이덴티티 확립 (#A5B2A2 컬러)
- 와이어프레임 제작
- UI/UX 디자인 (Figma)
- 스타일 가이드 작성
04
Development
- HTML/SCSS/JavaScript 구현
- 반응형 웹 구축
- jQuery 애니메이션 적용
- 갤러리 & 슬라이드 기능 구현
05
Testing & Optimization
- 크로스 브라우징 테스트
- 모바일 반응형 검증
- 성능 최적화 (이미지 로딩)
- 접근성 점검
06
Launch & Delivery
- 최종 배포
- 클라이언트 인수인계
- 운영 가이드 제공
- 사후 관리 및 업데이트 지원
Visual
메인 화면에 가득 차있는 영상이 스크롤을 내리면 자동으로 90%의 비율로 작아지면서, 외곽은 라운드로 바뀌도록 하여 하단의 섹션과 잘 어우러지도록 jQuery로 구현하였습니다.
Section1
작은 이미지를 클릭하거나 호버하면 왼쪽 큰 섹션에 이미지가 보이고, 클릭하지 않더라도 자동으로 차례대로 보이도록 jQuery로 구현하였습니다. 스냅/영상 전문 업체인 브랜드의 특성에 맞춰 사진이 찍히는듯한 효과를 jQuery로 구현하였습니다.
Section2
사용자의 스크롤 컨트롤에 맞춰 이미지가 부드럽게 한 장씩 올라오는듯한 효과를 jQuery로 구현하였습니다.
Section3
Swiper-Slide를 사용하여 대표 사진을 넣고, 페이지네이션과 버튼을 이용하여 사용자가 사진을 쉽게 선택하여 볼 수 있도록 구현하였습니다. 또한, 사진을 직접 넘기지 않더라도 자동으로 무한 재생 가능하도록 infinity-loop 버전을 사용하였습니다.
Footer
연락처 정보와 소셜미디어 및 오픈채팅 링크를 포함한 푸터로 사용자가 업체측으로 쉽게 연락할 수 있도록 구성했습니다.
Header
포트폴리오 섹션은 업체의 특성에 맞춰 갤러리를 중심으로 구성했습니다. 메인과 동일한 브랜딩을 유지하면서도 갤러리에 최적화된 레이아웃을 적용했습니다.
Gallery Section
작품 이미지를 최적화하여 배치하고, 라이트박스 기능을 통해 사용자가 큰 화면으로 감상할 수 있도록 구현했습니다. 클라이언트가 새 이미지 파일들을 기존의 파일과 동일한 이름을 사용하여 업데이트하면 새로운 사진으로 업데이트 되도록 구현했고, 새로고침시 일정 비율로 랜덤 배치되도록 구성하여 감각적인 느낌을 더하였습니다.
Navigation
야외와 본식, 스냅과 필름 등 카테고리별로 작품을 분류하여 사용자가 원하는 스타일의 작품을 쉽게 찾을 수 있도록 구성했습니다.