디자인이 화면에서 그대로 살아나려면그 밑을 받치는 개발이 단단해야 합니다.

시안 그대로

시안에서 본 질감과 움직임을 실제 화면에서도 똑같이 구현합니다. 스크롤 연출부터 화면 전환, 3D까지 그대로 옮깁니다.

직접 관리하는 사이트

개발을 몰라도 글과 사진을 바로 바꿀 수 있는 관리자 페이지를 함께 만듭니다.

늘어나도 괜찮은 구조

페이지가 늘어나도 처음부터 다시 만들 필요가 없도록, 설계 단계부터 확장을 염두에 둡니다.

인터랙티브 웹

움직임도 디자인입니다.

스크롤에 맞춰 나타나는 장면, 끊김 없는 페이지 전환, WebGL과 3D까지.
브랜드의 분위기를 화면 안에서 직접 느끼게 만듭니다.

스크롤 연출

스크롤에 따라 글과 이미지가 등장하고 움직이는 장면을 만듭니다.

3D · WebGL

Three.js와 WebGL로 깊이감 있는 장면과 인터랙션을 구현합니다.

페이지 전환

페이지를 넘길 때도 흐름이 끊기지 않도록 자연스럽게 이어 줍니다.

커머스 · 관리자

파는 사이트는 예쁜 것만으로는 부족합니다.

카페24 자사몰 커스텀 디자인부터 직접 운영할 수 있는 관리자 페이지와
데이터베이스까지, 실제 운영 방식에 맞춰 만듭니다.

카페24 커스텀

기본 스킨으로는 어려운 디자인과 인터랙션을 카페24 위에 구현합니다.

관리자 페이지

개발자 없이도 글, 이미지, 노출 순서를 바로 바꿀 수 있습니다.

데이터 · 알림

문의와 회원 데이터를 정리하고, 새 문의가 들어오면 메일로 바로 알려 드립니다.

성능 · 검색

빨리 열리고, 검색에 잘 걸리는 사이트.

이미지 압축과 지연 로딩, 검색엔진 등록처럼
눈에 잘 띄지 않는 부분까지 꼼꼼히 챙깁니다.

로딩 속도

큰 이미지와 영상은 화면 크기에 맞게 줄이고, 필요할 때만 불러옵니다.

검색 노출

네이버와 구글에 맞춰 기본 설정을 하고 검색엔진 등록까지 진행합니다.

접속 통계

방문자가 어디서 들어와 무엇을 봤는지 한눈에 확인할 수 있습니다.

작업 범위

기획 · 정보 구조 설계
UI · UX 디자인
인터랙티브 프론트엔드
3D · WebGL
관리자 페이지 · CMS
데이터베이스 · 로그인
카페24 커스텀
다국어 (국문 · 영문)
검색엔진 최적화 · 등록
도메인 · 서버 · 배포
문의 메일 알림
오픈 후 유지보수

작업 보기

진행 방식

듣기

무엇을 만들지보다 왜 만드는지부터 정리합니다. 브랜드가 하고 싶은 이야기와 방문자가 찾는 것을 먼저 듣습니다.

만들기

기획, 디자인, 개발을 한 팀에서 진행합니다. 시안에서 약속한 장면이 실제 화면에 그대로 나옵니다.

다듬기

오픈한 뒤에도 수정과 개선을 이어 갑니다. 사이트가 계속 제 역할을 하도록 함께 관리합니다.

NEXT.JS
REACT
TYPESCRIPT
GSAP
THREE.JS
WEBGL
LENIS
VITE
NODE.JS
SUPABASE
POSTGRESQL
VERCEL
CLOUDFLARE
RESEND
CAFE24
FIGMA

FRONTEND
INTERFACE
APPLICATIONS
MOTION
3D
GRAPHICS
SCROLL
BUILD
BACKEND
DATABASE · AUTH
DATA
DEPLOYMENT
DNS · MAIL
EMAIL
COMMERCE
DESIGN

대표 작업