본문 바로가기

Components MM · Interactive Web Studio

만지고 싶은 웹을 만듭니다.

스크롤 한 번, 클릭 한 번에도 반응하는 화면. 브랜드가 기억되는 순간을 부품 단위로 설계하고 조립합니다.

Manifesto

사람들은 화면보다 화면이 반응한 순간을 기억합니다. 그래서 버튼 하나, 스위치 하나까지 손끝에 반응하게 만듭니다.

화면을 재사용할 수 있는 부품으로 나누고, 부품마다 움직임을 붙여 조립합니다. 그래서 예쁘고, 빠르고, 고치기 쉽습니다.

Made of

이 페이지를 만든 숫자

  • 101프레임

    스크롤로 넘기는 3D 장면

    맨 위 로고가 MM에서 WM.이 되기까지

  • 30개

    만들고 빚고 코드로 조립한 부품

    버튼, 토글, 커서, 말풍선, 로켓까지 전부 3D

  • 0.12초

    누른 순간 돌아오는 반응

    눌림, 색 변화 같은 첫 피드백의 길이

  • 60fps

    스크롤 내내 지키는 프레임

    transform과 opacity만 움직여 끊기지 않게

Dive in

잘 만든 화면은, 안쪽부터 다릅니다.

스크롤하면 화면 안으로 날아 들어가, 저희가 만드는 화면들 사이를 지나갑니다.

모든 화면은, 결국 부품의 조립입니다.

랜딩 페이지도, 앱도, 대시보드도. Components MM은 화면을 부품 단위로 설계하고 만듭니다.

What we make

눌러 보면 압니다.

만드는 화면 다섯 가지를 방 하나씩에 옮겨 왔습니다. 설명을 읽기 전에 버튼부터 눌러 보세요.

01 / 05

브랜드 캠페인 사이트

스크롤 한 번에 이야기가 펼쳐지는 랜딩. 신제품 출시, 캠페인, 브랜드 소개 페이지를 만듭니다.

campaign.html
02 / 05

커머스

담기 버튼이 튀고 장바구니가 대답하는 쇼핑 화면. 카페24부터 자체 쇼핑몰까지.

shop / item-042
미니 크로스백39,000원
03 / 05

대시보드

숫자가 많아도 한눈에 읽히는 관리자 화면. 차트가 움직이면 데이터가 이야기가 됩니다.

admin / weekly
이번 주 방문16,095
04 / 05

AI 프로덕트

답이 흘러나오는 대화형 화면. 생성형 AI 서비스가 사람에게 닿는 얼굴을 만듭니다.

assistant

랜딩 페이지에 넣을 인터랙션 추천해 줘

스크롤에 맞춰 로고가 조립되는 첫 화면, 문장 속에서 튀어나오는 3D 부품, 잡아서 던질 수 있는 놀이터를 추천해요.

05 / 05

모두를 위한 웹

화려해도 키보드 하나로 끝까지 쓸 수 있게. 웹접근성 기준을 지키는 기관 사이트도 만듭니다.

a11y / contrast
민원 신청Tab 키로 아래 버튼까지 이동해 보세요.

How it's made

부품이 모여 화면이 됩니다.

  1. 01한 문장 정하기이 화면이 기억되어야 할 한 가지를 먼저 정합니다.
  2. 02부품으로 나누기화면을 카드, 입력창, 버튼 같은 부품으로 쪼갭니다.
  3. 03모양 입히기부품마다 색과 재질, 3D 형태를 만듭니다.
  4. 04움직임 붙이기누르고, 끌고, 스크롤할 때의 반응을 설계합니다.
  5. 05조립하기씬과 스크롤 길이에 맞춰 부품을 제자리에 끼웁니다.
  6. 06내놓기속도와 접근성을 확인한 뒤 세상에 공개합니다.
부품 6 / 6

브랜드가 기억되는 화면

Playground

만져 보세요.

이 페이지를 만든 3D 부품 가운데 15개가 무중력으로 떠다닙니다. 톡 치면 사방으로 흩어집니다.

던진 횟수 0

Contact

다음에 기억될 화면, 같이 조립해요.

브랜드 사이트, 캠페인 페이지, 쇼핑몰, 서비스 화면. 아이디어 한 줄이면 충분합니다. 보통 하루 안에 답장드립니다.

카카오톡 오픈채팅(새 창에서 열림)메일 보내기

components.mm@gmail.com

명함을 눌러 뒤집어 보세요