촬영물이 주인공이 되는 스튜디오 웹사이트
1.C1rjM0v3.webp
  • (업체)
    AP Studio
  • (업종)
    Photography Studio
  • (제공 서비스)
    Website
  • (서비스 영역)
    DEVELOPMENT, GRAPHIC
  • (역할)
    Frontend Developer
  • (기술 영역)
    Website Development, UI/UX Design
  • (기술 스택)
    Svelte, Motion, Interactive
  • (특징)
    Responsive Design, Light/Dark Mode, Interactive Animation, SEO, Performance Optimization, Accessibility
AP Studio는 제품과 모델 촬영을 전문으로 하는 포토 콘텐츠 스튜디오입니다. 화장품, 푸드, 인물, 펫 등 다양한 분야의 촬영 작업을 진행하며 브랜드의 비주얼 커뮤니케이션을 완성해온 스튜디오로, 이번 웹사이트는 그간 축적해온 작업물의 퀄리티를 온전히 전달하고 신규 클라이언트와의 접점을 넓히기 위한 목적으로 기획되었습니다. 촬영 스튜디오라는 업의 특성상, 웹사이트 자체가 하나의 포트폴리오이자 브랜드의 얼굴이 되어야 한다는 점을 프로젝트의 출발점으로 삼았습니다.

가장 중요한 원칙은 "촬영물이 주인공이 되는 화면"이었습니다. 이를 위해 UI 요소를 최소한으로 덜어내고, 넉넉한 여백과 절제된 타이포그래피를 중심으로 레이아웃을 구성했습니다. 사진(Photograph), 영상(Video), 공간(Space)이라는 세 갈래의 서비스 축을 명확히 분리하면서도, 카테고리별 포트폴리오를 자연스럽게 탐색할 수 있도록 내비게이션을 설계했습니다. 또한 다크 모드와 라이트 모드를 모두 지원해, 사용자가 선호하는 환경에서 이미지를 가장 편안하게 감상할 수 있도록 했습니다.

메인 화면의 비주얼 슬라이더부터 스크롤에 반응하는 섬세한 모션까지, 정적인 이미지 갤러리를 넘어선 생동감 있는 경험을 만드는 데 집중했습니다. SvelteKit 기반으로 페이지 전환 속도와 퍼포먼스를 최적화했고, WebP 포맷과 반응형 이미지 처리를 통해 고해상도 촬영물을 다양한 디바이스에서 빠르고 선명하게 전달할 수 있도록 구현했습니다. 결과적으로 AP Studio의 전문성과 감도를 첫 화면에서부터 직관적으로 느낄 수 있는, 스튜디오 그 자체를 닮은 웹사이트가 완성되었습니다.
1.C1rjM0v3.webp
2_.CgxYsaZd.webp
3_.D6CP-sfx.webp
6.BphwNDDd.webp
4_.D4QzyPjH.webp
5_.CZS-yQwc.webp

0%