StudioOff-Beat.

오프비트는 서울을 기반으로 활동하는 포트레이트·커머셜·공연 사진 스튜디오입니다. 국립현대무용단, 세종문화회관, 국립극단 같은 국가급 문화예술 프로젝트부터 카카오, 나이키, 포춘 등 네임드 커머셜까지 폭넓게 작업해 왔습니다. SATZ Studio는 브랜드 언어 설계부터 커스텀 인터랙션 개발까지 단 하나의 창구에서 도맡아 offbeat.kr을 완성했습니다.

• 클라이언트: 스튜디오 오프비트(사진 스튜디오) — 제작 SATZ Studio
• 범위: 버벌 브랜딩 + 웹 디자인 + 커스텀 개발 + CMS 설계 + 검색 최적화 및 구조화 데이터
• 기간: 2025년 10월 – 2026년 1월 (실작업 약 3개월, 미팅 6회)
• 결과물: 7개 페이지, 4개 CMS 컬렉션
• 성과: Awwwards Honorable Mention

• 온라인에 자기 자리가 없었습니다. 6년간 제대로 된 웹사이트가 없었고, 클라이언트 유입은 전적으로 인스타그램에 의존했습니다. 이전 시도들은 늘 멈춰 섰는데, 기존 개발자들이 기술 스택에만 관심이 있을 뿐 오프비트의 철학에는 무관심했기 때문입니다.
• 인스타그램의 한계. 포트레이트·커머셜·공연처럼 성격이 제각각인 세 카테고리를, 비율마저 다른 이미지들과 함께 하나의 피드에 담기는 어려웠습니다. 무엇보다, 클라이언트를 작업의 세계로 초대하기가 어려웠습니다.
• 단순 업로드가 아니라, 정체성의 재정의. 한 번도 분류되거나 구조화된 적 없는 아카이브에 수백 개의 프로젝트가 쌓여 있었습니다. 필요한 것은 ‘포트폴리오 정리’가 아니라 정체성을 다시 세우는 일이었습니다.

그들이 원한 것 (브리프)

• 실제로 스튜디오를 방문한 듯한 무드, 어둠 속에서 빛이 서서히 피사체를 드러내는 감각을 웹으로 옮기는 것.
• 카메라와 조명 앞에서 편안함을 느끼게 하는 인터랙션.
• 전시나 갤러리에 들어서는 듯한 인상.
• 카테고리마다 다른 성격과 이미지 비율을 모두 아우르는 구조.

• 정해진 템플릿을 들고 가지 않았습니다. 오프비트의 철학을 끝까지 듣고, 그 답을 함께 설계했습니다.
• 버벌 브랜딩 위에 세우다. 진정성, 질감, 리듬처럼 쉽게 추상으로 흐르는 언어를 구체적인 브랜드 언어로 옮겼습니다. OFF-BEAT라는 이름을 ‘일상의 정박(on-beat)을 깨고 나오는 결정적 엇박(off-beat)의 순간’으로 확장하고, 포지셔닝을 Visual Advocate로 정립했습니다.
• 웹 위에 쓰는 자서전 같은 웹사이트. 이 프로젝트를 ‘짓는 동시에 아카이빙하는 일’, 과거를 정리하면서 새로운 것을 만드는 일로 정의하고, 매 단계마다 그 이유와 방법을 클라이언트에게 설명하며 전 과정을 진행했습니다.
• 스튜디오의 빛을 웹으로. 여러 카테고리에 걸친 160여 개 프로젝트 중 선별한 작업을 홈에서 빠르게 훑어볼 수 있도록 배치하고, 어둠 속 빛의 무드를 웹에서 재현하는 은은한 파티클 드리프트 효과를 개발했습니다. 전시 공간에 들어서는 듯한 첫인상입니다.

구조, 7개 페이지

Home / Studio / Portrait / Project / Stage / Stage-Current / Contact

멀티 레퍼런스 CMS (4개 컬렉션)

Big Section · Portrait · Works · Stage-Current. 하나의 콘텐츠를 여러 페이지에서 재사용할 수 있는 관계형 구조입니다. 최대 2,560장의 이미지(160개 프로젝트 × 16)를 수용합니다.

커스텀 인터랙션 (크고 작은 것 약 30종)

파티클 기반 조명 무드 효과, 커스텀 커서, 스크롤 방향을 인식하는 오토하이드 내비게이션, 페이지 전환 애니메이션, 스크롤 기반 리빌, 다중 조건 필터링, 플립 라이트박스, 푸터 패럴랙스, 로고 프리로더. 카테고리마다 다른 이미지 비율(예: 1:1과 4:5)은 12컬럼 그리드와 뷰어 제약으로 일관되게 처리했습니다.

• 기술: Webflow · GSAP + ScrollTrigger · Swiper · Three.js
• Webflow의 기본 기능을 넘어 인터랙션·필터링·라이트박스·내비게이션을 구현하기 위해, 직접 설계해 적용한 코드는 14,495라인의 커스텀 코드입니다.
• 추가 범위: 버벌 브랜딩, 국·영문 카피라이팅.

이미지 갤러리

• Awwwards Honorable Mention.Awwwards는 전 세계 웹사이트의 디자인·창의성·기술 완성도를 평가하는 국제 웹디자인 어워드입니다. Honorable Mention은 심사 대상 사이트 중 높은 완성도의 작업에 주어지는 등급으로, 위로 Site of the Day(SOTD) 같은 상위 등급이 있습니다.
• 명함을 건네는 방식이 달라졌습니다. 예전엔 사람들이 웹사이트를 안 보길 조용히 바랐다면, 이제는 먼저 ‘꼭 한번 보세요’라고 말합니다. 클라이언트가 가장 강하게 체감한 변화입니다.
• 런칭 이후, 더 많은 잠재 클라이언트가 연락을 결정하기 전에 웹사이트를 살펴본다고 전했습니다.

“다른 팀들과 만날 때면, 웹사이트란 이래야 한다는 정답이 이미 정해져 있는 듯한 느낌을 자주 받았습니다. SATZ Studio는 달랐습니다. 정해진 해법을 들고 오지 않았고, 우리 이야기를 끝까지 들은 뒤 함께 맞는 답을 만들어 갔습니다.

이런 팀은 정말 운이 좋아야 만난다고 느낍니다. 매 단계마다 무엇을, 왜, 어떻게 하는지 먼저 설명하고 넘어갔고, ‘웹사이트 작업이 이렇게까지 갈 수 있구나’ 싶은 순간이 많았습니다.

예전엔 명함을 건넬 때, 상대가 우리 웹사이트를 보지 않기를 조용히 바랐습니다. 지금은 제가 먼저 ‘저희 웹사이트 한번 보세요’라고 말합니다. 그 차이는 하늘과 땅입니다.

인스타그램이 남의 플랫폼에 자리를 빌리는 것이라면, 이 웹사이트는 우리만의 집이 되었습니다. 우리가 정말 보여주고 싶은 것을, 보여주고 싶은 방식으로 보여줄 수 있는 곳입니다.

이 웹사이트는 단순히 포트폴리오를 정리하는 일이 아니었습니다. 짓는 동시에 아카이빙하는 과정, 거의 웹 위에 자서전을 써 내려가는 일에 가까웠습니다.

그토록 어려운 과정을 끝까지 진심으로 붙들 수 있었던 이유는, 함께한 팀이 SATZ Studio였기 때문이라고 분명히 말할 수 있습니다.”