STEP 01
작은 공방에서 시작했습니다
브랜드 스토리 예시 — 스크롤을 내리면 한 문단씩 떠오르며 이야기가 이어집니다.
SIMPLE WEB LAB — INTERACTION SHOWCASE
웹 인터랙션 기술 쇼케이스보여주는 기술,
움직이는 웹.
슬라이더와 아코디언부터 WebGL 셰이더, 3D 제품 뷰어, WebGPU 파티클까지.
설명 대신 직접 만져 보세요. 모두 이 페이지에서 실제로 동작합니다.
- 18LIVE DEMOS
직접 조작하는 데모 - 63D · WEBGL
실시간 3D 그래픽 - GPUWEBGPU READY
차세대 그래픽 API
01HERO SLIDER
메인 배너 슬라이더
자동으로 넘어가되 진행 상황이 보이고, 손가락으로 밀어도, 키보드로 눌러도 움직입니다. 배경은 천천히 줌인되어 정지된 사진도 살아 있는 화면이 됩니다.
02EXPANDING PANELS
확장형 아코디언 갤러리
마우스를 올리거나 누른 패널이 부드럽게 넓어지며 내용을 펼칩니다. 한 화면에 여러 사업 분야를 담으면서도 복잡해 보이지 않습니다. 모바일에서는 세로로 바뀝니다.
03SMOOTH ACCORDION
부드럽게 열리는 FAQ
브라우저 기본 details 요소에 최신 CSS를 더해 높이가 자연스럽게 늘어나고, 하나를 열면 나머지는 닫힙니다. 자바스크립트 없이 검색엔진이 모든 답변을 읽을 수 있습니다.
01자바스크립트 없이도 동작하나요?
네. 브라우저에 내장된 details 요소라서 스크립트가 꺼져 있어도 열고 닫힙니다. 같은 name 속성을 준 항목끼리는 하나만 열리도록 브라우저가 직접 처리합니다.
02높이 애니메이션은 어떻게 만드나요?
예전에는 높이를 스크립트로 재서 숫자로 넣어야 했습니다. 이제는 interpolate-size 속성 하나로 height: auto까지 부드럽게 늘어나고, ::details-content 선택자로 펼쳐지는 영역만 골라 움직입니다.
03검색엔진이 답변을 읽을 수 있나요?
답변이 처음부터 HTML 안에 들어 있어서 닫혀 있어도 검색엔진이 모두 읽습니다. 구조화 데이터(FAQPage)와 함께 쓰면 검색 결과에 질문과 답이 바로 노출될 수 있습니다.
04오래된 브라우저에서는 어떻게 보이나요?
애니메이션만 빠지고 즉시 열리고 닫힙니다. 기능은 모두 그대로라서 어떤 브라우저에서도 내용을 놓치지 않습니다.
04SCROLL-DRIVEN
스크롤 연동 애니메이션
스크롤하는 만큼 요소가 떠오르고 선이 그려집니다. 최신 CSS 스크롤 타임라인으로 동작해 메인 스레드를 막지 않고, 지원하지 않는 브라우저에서는 같은 효과를 스크립트로 보여줍니다.
STEP 02
첫 번째 매장을 열었습니다
사진은 살짝 확대된 채 들어와 제자리를 찾고, 왼쪽의 선은 읽은 만큼 그려집니다.
STEP 03
전국의 고객을 만났습니다
연혁·성장 과정처럼 순서가 있는 내용에서 사용자가 스스로 속도를 조절하며 읽게 됩니다.
STEP 04
다음 10년을 준비합니다
모든 효과는 CSS 스크롤 타임라인으로 동작해 스크롤을 멈추면 애니메이션도 멈춥니다.
05PINNED HORIZONTAL
가로 스크롤 핀 섹션
세로로 스크롤하면 화면이 고정된 채 콘텐츠가 가로로 흘러갑니다. 단계가 있는 이야기를 순서대로 보여줄 때 몰입감이 큽니다. 모바일에서는 손가락으로 넘기는 카드가 됩니다.
HOW WE BUILD스크롤을 내리면
스크롤을 내리면
옆으로 흘러갑니다.
제작 과정 예시 — 세로 스크롤 한 번으로 다섯 단계를 차례로 보여줍니다.
01 — DISCOVER
발견
무엇을 위한 사이트인지, 누가 방문하는지부터 정리합니다.
02 — STRUCTURE
설계
메뉴 구조와 화면 흐름을 한 장의 설계도로 만듭니다.
03 — DESIGN
디자인
브랜드의 결을 담아 화면 하나하나를 그립니다.
04 — DEVELOP
개발
어떤 기기에서도 빠르고 매끄럽게 동작하도록 만듭니다.
05 — LAUNCH
런칭
모든 시나리오를 검증한 뒤 세상에 공개합니다.
063D TILT & GLARE
3D 틸트 카드
카드가 포인터를 따라 입체적으로 기울고 표면에 빛이 비칩니다. 상품이나 카드 한 장을 손에 들고 돌려 보는 듯한 경험을 줍니다.
PLATINUMSIMPLE MEMBERS
담수 진주 목걸이Pearl Line
노이즈 캔슬링 무선 헤드폰Studio Air
07SPOTLIGHT BENTO
스포트라이트 벤토 그리드
크기가 다른 칸을 도시락처럼 배치하고, 마우스가 지나가는 자리의 테두리에 조명이 켜집니다. 여러 기능을 한눈에 정리하면서도 시선을 붙잡습니다.
RESPONSIVE
모든 화면에 맞춘 반응형
PC, 태블릿, 스마트폰까지 하나의 사이트가 화면에 맞춰 스스로 바뀝니다.
PERFORMANCE
빠른 첫 화면
이미지 지연 로딩, 폰트 서브셋, 사전 렌더링으로 첫 화면을 빠르게 띄웁니다.
SEO
검색에 강한 구조
제목·설명·구조화 데이터·사이트맵을 기본으로 갖춥니다.
ACCESSIBILITY
누구나 쓰는 웹
키보드 조작과 화면 낭독기를 고려해 만듭니다.
ADMIN
직접 관리하는 콘텐츠
관리자 화면에서 글과 이미지를 바로 수정합니다.
OPERATION
오픈 후에도 안정적으로
HTTPS, 백업, 모니터링까지 운영에 필요한 기본기를 챙깁니다.
08MAGNETIC CTA
마그네틱 버튼
포인터가 가까이 오면 버튼이 끌려오듯 다가옵니다. 가장 중요한 버튼에 작은 재미를 더해 누르고 싶게 만듭니다.
09KINETIC TYPOGRAPHY
키네틱 타이포그래피
카피가 한 글자씩 올라오고, 키워드가 끝없이 흐르고, 숫자가 목표값까지 올라갑니다. 글자 자체가 움직이는 비주얼이 됩니다.
- 월 방문자
- 0
- 문의 전환율
- 0.0%
- 누적 상담
- 0건
- 성능 점수
- 0점
수치는 대시보드 화면을 가정한 예시 값입니다.
10BEFORE / AFTER
비포·애프터 비교 슬라이더
가운데 손잡이를 끌어 전후를 비교합니다. 키보드 방향키로도 움직이고 화면 낭독기도 현재 비율을 읽습니다.
BEFOREAFTER11VIEW TRANSITIONS
뷰 트랜지션
목록에서 누른 사진이 그대로 커지며 상세 화면이 됩니다. 브라우저가 화면 전환 사이를 이어 주어 앱처럼 매끄럽게 느껴집니다.
12CONTAINER QUERIES
컨테이너 쿼리 반응형 카드
화면 크기가 아니라 놓인 자리의 너비에 맞춰 카드가 스스로 모양을 바꿉니다. 오른쪽 아래 손잡이를 끌어 너비를 바꿔 보세요.
드래그해서 너비 조절 ↘
CAFE · 성수동
오후의 정원
통창 너머로 정원이 보이는 브런치 카페. 주말 예약을 받습니다.
사이드바 · 좁은 칸
CAFE · 성수동
오후의 정원
통창 너머로 정원이 보이는 브런치 카페. 주말 예약을 받습니다.
본문 · 넓은 칸
CAFE · 성수동
오후의 정원
통창 너머로 정원이 보이는 브런치 카페. 주말 예약을 받습니다.
PART 02한 단계 더,
한 단계 더,
3D와 GPU의 영역으로.
여기부터는 Three.js와 WebGL, WebGPU로 브라우저 안에서 실시간 3D 그래픽을 그립니다. 몰입형 3D는 최근 웹 어워드 수상작에서 가장 두드러지는 흐름입니다. 모든 장면은 화면에 가까워질 때만 불러와 페이지를 무겁게 만들지 않습니다.
- Three.js
- React Three Fiber
- GLSL
- WebGPU
- TSL
13GLSL SHADER
셰이더 그라디언트 히어로
사진이나 동영상 대신 GPU가 매 프레임 직접 그리는 배경입니다. 노이즈가 자기 좌표를 비틀며 대리석처럼 흐르고, 마우스를 따라 물결이 일어납니다. 용량은 몇 KB뿐이라 동영상 배경보다 훨씬 가볍습니다.
143D CONFIGURATOR
3D 제품 컨피규레이터
색상과 마감을 고르면 3D 제품이 그 자리에서 바뀌고 가격도 함께 계산됩니다. 드래그해서 360° 돌려 보며 사진으로는 알 수 없는 입체감과 질감을 확인합니다.
15LIQUID GLASS
리퀴드 글래스
뒤에 있는 글자와 색이 유리를 통과하며 휘고 번집니다. 실제 빛의 굴절률과 두께를 계산하는 물리 기반 재질이라 형태를 바꿔도 자연스럽게 반응합니다.
16WEBGPU COMPUTE
WebGPU 파티클
수만 개의 입자가 구, 큐브, 은하, 물결로 형태를 바꿉니다. 입자 하나하나의 움직임을 차세대 그래픽 API인 WebGPU의 컴퓨트 셰이더가 GPU에서 계산하고, WebGPU가 없는 기기에서는 같은 코드가 WebGL 2로 자동 전환됩니다.
17WEBGL TRANSITION
WebGL 이미지 트랜지션
사진이 바뀌는 순간을 셰이더가 픽셀 단위로 연출합니다. 노이즈로 녹아들고, 액체처럼 흐르고, 화면이 깨지듯 전환됩니다. 사진 위에 마우스를 올리면 물결이 일어납니다.
183D GALLERY
3D 원형 갤러리
작업물이 원통을 따라 휘어진 채 둘러서 있습니다. 드래그하면 관성으로 돌아가고, 카드를 누르면 정면으로 다가옵니다. 평면 목록과 다른 전시 공간 같은 경험을 줍니다.
BUILD IT WITH US이 기술들,
이 기술들,
당신의 홈페이지에 담아 드립니다.
원하는 효과를 골라 말씀만 주세요. 기획부터 디자인, 개발까지 한 팀이 브랜드에 맞게 다듬어 넣습니다.