Skip to content
← 전체 프로젝트
프로젝트

The Cloud One

The Cloud One은 모텔 원 그룹의 디자인 브랜드로, 유럽 도시들과 뉴욕에 호텔을 두고 있습니다. 플랫폼은 처음부터 다시 구축되었습니다 — 이미지 중심의 디자인, 그리고 그것을 모든 영역에서 일관되게 유지하는 디자인 시스템으로.

2026호텔 예약 플랫폼프론트엔드 & DevOps
The Cloud One

플랫폼의 전면 재구축입니다. 저는 디자인 시스템에 참여하고, 프론트엔드 전반에 걸쳐 컴포넌트와 모듈을 구현했습니다 — 여기에 플랫폼이 배포되는 인프라도 함께 다뤘습니다.

공통의 토대
01디자인 시스템

공통의 토대

큰 이미지, 그 주변에는 거의 아무것도 없습니다. 홈페이지는 비주얼 하나와 검색만으로 충분합니다. 이 디자인이 플랫폼의 모든 영역에서 유지되도록 그 아래에 디자인 시스템이 놓여 있습니다 — 저는 여기에 참여했습니다. 인터페이스를 이루는 컴포넌트, 타이포그래피 스케일, 토큰 작업입니다.

The Cloud One이란
02브랜드

The Cloud One이란

The Cloud One은 모텔 원 그룹의 디자인 브랜드입니다. 유럽 도시들의 중심부와 뉴욕에 호텔을 두고 있습니다. 객실은 컴팩트하게 설계되어 있고, 각 호텔의 실제 중심은 라운지와 바, 그리고 종종 루프톱 테라스입니다. 모든 호텔은 기존 건물과 그 주변 안으로 지어집니다 — 프라하에서는 구시가지 한가운데에 자리합니다. 도착하고, 편안해지고, 잠시 꺼두는 것. 브랜드는 스스로를 그렇게 설명합니다. 플랫폼은 예약이 시작되기도 전에 그것을 전해야 합니다. 이미지의 모듈은 바로 그것이 일어나는 자리 중 하나입니다. 호텔을 하나씩 소개합니다.

뒤셀도르프-쾨 보겐
03호텔 상세 페이지

뒤셀도르프-쾨 보겐

한 호텔의 상세 페이지, 여기서는 뒤셀도르프-쾨 보겐입니다. 화면 아래에는 부커 바가 따라 붙습니다. 현재 검색 조건 — 날짜, 인원, 가격 — 을 계속 보이게 유지하고, 검색으로 되돌아가지 않아도 페이지 어디에서든 곧바로 객실 선택으로 이어줍니다.

04인프라

배포와 운영

인프라에도 참여했습니다 — 커밋부터 프로덕션까지의 자동화된 배포, 그리고 운영을 추적할 수 있게 하는 관측성입니다.

하나의 디자인 시스템 — 프론트엔드 전체에 걸쳐.

하이라이트

중요했던 점

퍼포먼스
최적화된 로딩 속도와 기기 전반의 안정적인 전송 — 첫 클릭부터 빠르게 느껴지는 페이지.
디자인 시스템
인터페이스 전체의 공통 토대가 되는 컴포넌트, 타이포그래피 스케일, 토큰.
UI/UX
마찰 없이 인터페이스에 성격을 더하는 부드러운 전환과 정교한 애니메이션.
접근성
처음부터 구현에 녹아든 요소 — 나중에 추가된 것이 아닌.
스택

사용 기술

Nuxt Vue TypeScript Tailwind CSS

더 보기