포트폴리오로 돌아가기
웹·앱 개발브랜드·콘텐츠
BP Studio — 프로젝트를 지도 위 좌표로 탐색하는 스튜디오 사이트
BP Studio · ‘흩어진 취향에 좌표를 찍는다’는 콘셉트를 인터랙티브 지도로 구현한 브랜드 사이트
2주
콘셉트→오픈
제작 기간
7개
한 화면 지도 아카이브
프로젝트
드래그 지도
핀 호버로 카테고리·상태 확인
탐색 방식
목록 전환
작은 화면에서 지도 접기
모바일
개요
BP Studio는 소수 취향을 위한 커뮤니티와 커머스를 만드는 서비스 스튜디오입니다. 운영 중인 프로젝트를 등고선 지도 위 핀으로 배치해 드래그로 탐색하고, 각 프로젝트의 상태와 링크로 이어지는 원페이지 사이트를 만들었습니다.
과제
포트폴리오 그리드는 흔합니다. 스튜디오의 성격(각기 다른 취향의 좌표)이 첫 화면에서 느껴져야 했고, 그러면서도 정보 접근은 단순해야 했습니다.
솔루션
좌표·프레임 번호 같은 지도 언어를 타이포그래피에 녹이고, 프로젝트 핀에 마우스를 올리면 카테고리와 상태가 나타나게 했습니다. 모바일에서는 지도를 접고 목록형으로 전환해 접근성을 지켰습니다. 페이지는 정적 렌더링으로 미리 만들어 둡니다.
전략
01
콘셉트를 UI로
‘좌표’라는 브랜드 언어를 지도·등고선·프레임 표기로 화면에 옮겼습니다.
02
탐색 설계
드래그 탐색과 핀 호버로 프로젝트를 발견하게 하고, 목록 접근도 남겼습니다.
03
모바일 대응
작은 화면에서는 지도를 접고 카드 목록으로 전환합니다.
04
성능
정적 렌더링과 최소 스크립트로 첫 화면을 가볍게 유지했습니다.
실행
