결과물과 그 안의 설계.

무엇을 만들었는지, 어디까지 구현했는지.
공개된 화면과 작업 범위를 함께 소개합니다.

01 / INTERACTION자동차 인터랙션 · 진행 중

어두운 전시 공간에 놓인 McLaren Z1 독립 디자인 스터디 콘셉트 카

Scroll-led scenes
Motion sequence
Full-screen views

Independent design study · McLaren Automotive 비제휴 콘셉트

McLaren Z1 — The Last Overture

한 대의 콘셉트 카를 스크롤과 장면 전환으로 경험하는 웹.

McLaren Z1 독립 디자인 스터디를 하나의 스크롤 기반 인터랙티브 웹 경험으로 구성했습니다. 실루엣과 에어로 흐름, 주요 뷰를 장면별로 탐색할 수 있습니다.

RUTTO가 만든 것: 인터랙션 기획 · 웹 설계 · 모션·프론트엔드 개발

자동차 인터랙션 보기 이와 비슷한 웹 경험 문의

과제 — 자동차 디자인 스터디를 서사로 연결: 콘셉트 카의 실루엣과 비례, 공기 흐름에 담긴 의도를 장면을 따라 읽을 수 있도록 경험의 순서를 설계했습니다.
제작 — 스크롤에 반응하는 장면과 뷰어: 스크롤 위치에 따라 이미지 시퀀스와 설계 단계를 바꾸고, 주요 도면은 전체 화면 뷰어에서 확인하도록 구현했습니다.
현재 — 공개 프리뷰에서 현재 작업을 확인할 수 있습니다: 오프닝 시퀀스, 디자인 과정, 공력 콘셉트와 주요 뷰를 공개 프리뷰에서 살펴볼 수 있습니다. 인터랙션과 장면을 계속 다듬고 있으며, McLaren Automotive와 무관한 독립 디자인 스터디입니다.

02 / EXPERIENCE인터랙티브 경험 · 공개 완료

NONAME Cloud 실시간 3D 구현 화면 — 드래그로 둘러보고 별과 조명을 조작하는 공개 프리뷰

Drag to explore
Interactive light
Real-time 3D

Cloud 실시간 3D 구현 화면 · 공개 프리뷰 / 원작: NONAME · 웹 설계·개발: RUTTO

NONAME

작품을 보는 웹에서, 작품 안으로 들어가는 웹으로.

디지털 아티스트 NONAME의 비주얼을 관람자가 직접 탐색하는 인터랙티브 웹 경험. Cloud 장면에서 시점을 움직이고 별과 조명을 조작할 수 있도록 실시간 3D로 구현했습니다.

RUTTO가 만든 것: 인터랙티브 콘셉트 · 웹 설계 · 실시간 3D 개발

인터랙티브 프리뷰 이와 비슷한 웹 경험 문의

과제 — 작품의 분위기를 탐색 경험까지 이어가기: NONAME의 비주얼을 화면에 전시하는 데서 멈추지 않고, 관람자가 직접 시점과 빛에 개입하는 웹 경험을 설계했습니다.
제작 — Cloud 장면을 실시간 3D로 구현 완료: 드래그로 시점을 바꾸고 별과 조명을 눌러 반응을 확인할 수 있는 공개 프리뷰를 구현했습니다.
현재 — 실시간 3D 인터랙션을 공개했습니다: 공개 페이지에서 Cloud 장면을 드래그로 둘러보고 별과 조명을 조작할 수 있습니다. 인터랙티브 경험 구현과 공개를 완료했습니다.

03 / PRODUCT자체 제품 · 공개 데모

RUTTO Field 운영자 화면 — 오늘의 방문 일정, 작업 상태, 미배정 작업과 미수금. 시연용 가상 데이터

RUTTO Field 모바일 작업자 화면 — 배정된 현장과 작업 상태, 시연용 데이터

사무실에서는 전체 운영을.
현장에서는 오늘 할 일을.
역할에 맞춘 두 개의 화면

일정·배정
현장 기록
고객 보고
청구·미수금

파일럿 단계의 자체 제품입니다. 화면의 고객·금액·작업 기록은 공개 시연용 가상 데이터입니다.

RUTTO Field

현장의 하루와 사무실의 업무를 하나로.

현장 서비스 사업자를 위한 운영 시스템. 일정과 작업자 배정, 현장 기록, 고객 보고서, 청구와 미수금을 하나의 업무 흐름으로 연결했습니다.

RUTTO가 만든 것: 제품 설계 · 운영자 웹 · 작업자 모바일 웹 · 데이터·권한

제품 데모 보기 이와 비슷한 웹 경험 문의

과제 — 배정에서 기록과 정산까지 끊기지 않도록: 일정, 현장별 요청, 작업 결과와 청구 상태를 각각 관리해야 하는 업무를 하나의 제품 안에서 다룹니다.
제작 — 사무실과 작업자에게 필요한 화면을 각각 설계: 운영자는 일정·고객·현장·청구 상태를 관리하고, 작업자는 모바일에서 배정된 방문과 체크리스트·사진·이슈를 기록합니다.
현재 — 실제 구현 화면으로 확인하는 업무 흐름: 공개 데모 영상에서 오늘 운영 현황, 일정과 배정, 현장 작업, 결과 보고와 정산까지 확인할 수 있습니다. 모든 화면은 시연용 가상 데이터로 구성했습니다.

04 / COMMERCE브랜드 커머스 · 개발 중

IYKYK 브랜드 커머스 웹 — 흑백 도로 영상과 브랜드 로고가 보이는 메인 화면

Shop
Cart
Checkout
Admin

IYKYK 공개 개발 화면 / RUTTO: 웹 기획·디자인·개발

IYKYK

브랜드의 무드에서, 실제 판매와 운영까지.

IYKYK의 비주얼 아이덴티티를 유지하면서 상품 탐색, 장바구니, 체크아웃과 운영 화면을 하나의 커머스 웹으로 연결하고 있습니다.

RUTTO가 만든 것: 브랜드 웹 · 상품·장바구니 · 결제 연동 · 관리자 화면

개발 사이트 보기 이와 비슷한 웹 경험 문의

과제 — 강한 비주얼을 구매 흐름까지 이어가기: 브랜드의 어두운 스트릿웨어 무드를 유지하면서도 상품을 찾고 구매하는 흐름은 명확해야 했습니다.
제작 — 상품 탐색부터 결제 승인과 관리까지 연결: 상품 목록·상세, 장바구니와 체크아웃을 구현하고 Toss 결제 요청·서버 승인 흐름, Firebase 기반 상품·주문 관리 화면을 연결했습니다.
현재 — 실제 배포 환경에서 운영 준비 중: 공개 사이트에서 브랜드 화면, Shop, Cart, Checkout과 관리자 진입 화면을 확인할 수 있습니다. 결제와 운영 흐름은 개발 환경에서 계속 검수하고 있습니다.

05 / WEB브랜드 웹사이트 · 공개 배포

정결한청소 브랜드 웹사이트 — 서비스 소개와 전화 문의 버튼이 있는 메인 화면

서비스 이해
실제 작업 확인
전화·카카오 문의

정결한청소 공개 배포 화면 / RUTTO: 웹 기획·디자인·개발

정결한청소

어떤 일을 맡길 수 있는지, 어떻게 문의하는지.

청소 서비스의 범위와 실제 작업 사진을 한곳에 정리한 브랜드 웹사이트. 방문자가 서비스를 확인하고 전화·카카오 문의까지 이어갈 수 있도록 설계했습니다.

RUTTO가 만든 것: 정보 구조 · 웹 디자인·개발 · 모바일 문의 동선 · 기본 SEO

웹사이트 보기 이와 비슷한 웹 경험 문의

과제 — 서비스 정보에서 상담까지 이어지는 구조: 청소를 맡기려는 방문자가 서비스 범위와 작업 모습을 확인하고, 상담 방법을 쉽게 찾을 수 있는 구성을 설계했습니다.
제작 — 서비스 소개와 실제 작업 사진, 문의를 연결: 홈·서비스·가격 안내·후기·문의 페이지를 제작하고, 모바일 하단 전화 버튼과 카카오 문의 동선을 연결했습니다.
현재 — 반응형 화면과 검색·공유 기본 설정: 데스크톱과 모바일에 맞춘 화면, 사이트맵·robots·공유 메타데이터를 구현했습니다. 결과는 공개 사이트에서 확인할 수 있습니다.

06 / WEB작품 아카이브 · 공개 배포

NONAME 작품 아카이브 — Digital Artwork, Physical Album, Video, Personal Work 탭과 작품 그리드가 보이는 Archive 화면

NONAME 공개 아카이브 Archive 화면 / 작품: NONAME · 웹 설계·개발: RUTTO

NONAME Archive

NONAME의 작품을 한곳에, 처음부터 끝까지.

디지털 아티스트 NONAME의 작품을 모아 보여주는 아카이브 웹사이트. Digital Artwork·Physical Album·Video·Personal Work로 작업을 분류하고, 대표작 소개부터 전체 아카이브까지 하나의 흐름으로 연결했습니다.

RUTTO가 만든 것: 정보 구조 · 웹 디자인·개발 · 작품 분류 체계

아카이브 보기 이와 비슷한 웹 경험 문의

과제 — 디지털 아트워크부터 앨범·영상까지 한 사이트에 묶기: 매체가 서로 다른 작업들을 Digital Artwork, Physical Album, Video, Personal Work로 분류해, 방문자가 작가의 작업 전체를 한눈에 훑어볼 수 있게 설계했습니다.
제작 — 대표작 소개, 탭 분류, 상세 페이지를 같은 규칙으로 연결: 홈의 대표작 소개, 탭으로 구분한 Archive 그리드, 작품별 상세 페이지와 Info 페이지를 같은 타이포그래피·여백 규칙으로 설계하고 개발했습니다.
현재 — 지금 공개돼 있는 작품 전체를 확인 가능: 공개 사이트에서 매체별로 분류된 NONAME의 작품과 각 작품의 상세 페이지를 바로 확인할 수 있습니다.

04 — Start a project

어떤 웹이 필요한가요?
어떤 일이 불편한가요?

홈페이지·랜딩페이지, 쇼핑몰 디자인 개선,
3D 웹과 업무 시스템.
필요한 범위와 현재 상황을 알려주세요.

프로젝트 상담·견적 문의 hello@rutto.co.kr