시티오씨엘7 데모 —
‘도시의 중심’을 어반 미드나잇·시네마틱으로 설계한 이유
우리는 인천 미추홀구 학익동 도심 하이엔드 ‘도시의 중심’이라는 컨셉을 시각으로 옮기기 위해, 시티오씨엘7 데모를 어반 미드나잇 + 샴페인 골드 톤, 중앙정렬·다크 카드 레이아웃, 9초 켄번즈·커튼 리빌의 시네마틱 모션으로 설계했습니다. 다크는 도심의 깊이와 격을, 중앙정렬은 시선 집중을, 시네마틱 호흡은 첫 화면 몰입과 관심고객 등록을 노린 선택입니다. 이 구성은 골격 복제가 아니라 이 현장만을 위해 처음부터 짠 베스포크입니다.
- 컨셉 ‘도시의 중심’(인천 미추홀구 학익동 도심 하이엔드) → 디자인 언어 = 어반 미드나잇 + 샴페인 골드.
- 레이아웃은 중앙정렬·다크 카드 — 시선을 모으고 콘텐츠를 액자처럼 띄워 격을 만든다.
- 시그니처 모션은 9초 켄번즈 · 커튼 리빌 · 시네마틱 — 첫 화면을 영화처럼 열어 몰입을 만든다.
- 이 모든 선택은 체류 → 관심고객 등록(전환)으로 잇기 위한 것이며, 골격 복제가 아닌 이 현장만의 베스포크다.
이 데모는 어떤 현장을 위한 것인가?
시티오씨엘7단지는 인천 미추홀구 학익동 도시개발 지역의 도심 하이엔드 콘셉트입니다. 도시 한가운데, 생활 인프라가 이미 촘촘한 곳. 우리는 이 입지의 인상을 한 문장으로 잡았습니다 — ‘도시의 중심’. 분양 사이트의 모든 결정은 이 한 문장에서 역산했습니다. 색도, 정렬도, 모션도, “도시의 중심에 선다는 감각을 화면이 먼저 느끼게 하는가”를 기준으로 골랐습니다. (이 글은 PLOT이 역량 시연을 위해 자체 제작한 리디자인 컨셉 데모의 설계 근거이며, 실제 의뢰가 아닙니다.)
왜 밝은 화이트가 아니라 어반 미드나잇(다크)인가?
도심 하이엔드의 무드는 ‘밝고 친절함’이 아니라 ‘깊고 고요한 격’에 있다고 봤습니다. 어반 미드나잇은 야경 같은 도시의 깊이를 담고, 화면 전체를 차분히 가라앉혀 한 장면에 집중하게 만듭니다. 그 위에 샴페인 골드를 포인트로 얹으면 — 면적은 작게, 위치는 정확하게 — 절제된 고급감이 살아납니다. 골드를 넓게 쓰면 화려해서 가벼워지고, 다크만 쓰면 무거워서 차가워집니다. 우리는 미드나잇을 바탕, 골드를 호흡처럼 짚는 점광으로 배분해 ‘프리미엄한데 시끄럽지 않은’ 톤을 만들었습니다. 다크 테마가 모든 현장의 정답은 아닙니다 — 자연·교외 콘셉트라면 우리는 반대로 갔을 겁니다. 어반 미드나잇은 ‘도시의 중심’이라는 이 현장의 정체성에만 맞춘 선택입니다.
왜 중앙정렬과 다크 카드 레이아웃인가?
도심 하이엔드는 ‘많이 보여주는 것’보다 ‘정확히 한 곳을 보게 하는 것’이 더 고급스럽습니다. 그래서 핵심 메시지를 화면 가운데로 모으는 중앙정렬을 택했습니다. 시선이 좌우로 흩어지지 않고 단지 이름·핵심 카피·등록 버튼으로 한 줄기로 떨어집니다. 어두운 배경 위에 올린 다크 카드는 콘텐츠를 액자처럼 살짝 띄워 ‘격’을 만들고, 정보 블록 사이에 호흡(여백)을 줍니다. 특히 모바일에서 효과가 큽니다 — 화면이 좁을수록 정렬이 흩어지면 산만해지는데, 중앙정렬 + 카드 구조는 작은 화면에서도 한 흐름으로 읽히게 합니다. 화려한 그리드 대신 ‘하나씩, 가운데로’를 택한 건 이 현장의 절제된 인상을 지키기 위해서였습니다.
왜 9초 켄번즈·커튼 리빌의 시네마틱 모션인가?
첫 화면은 0.1초 안에 ‘이 단지는 다르다’를 말해야 합니다. 정지된 사진으로는 그 격을 전하기 어렵다고 봤습니다. 그래서 도시 전경에 9초 켄번즈(천천히 밀고 당기는 줌)를 걸었습니다. 너무 빠르면 광고처럼 부산하고, 너무 느리면 멈춘 듯 지루합니다 — 9초는 ‘살아 있는 장면’으로 느끼되 어지럽지 않은 호흡입니다. 이어 커튼 리빌로 콘텐츠를 한꺼번에 쏟지 않고 무대 막처럼 천천히 엽니다. 정보를 ‘던지는’ 게 아니라 ‘소개하는’ 동작이라, 방문자에게 기대감과 격을 동시에 줍니다. 이 시네마틱한 첫인상의 목표는 분명합니다 — 몇 초 더 머물게 하는 것. 모션 자체가 목적이 아니라, 머무름을 만들기 위한 도구입니다. 모션이 어떻게 전환의 도구가 되는지는 모션을 전환 장치로 쓰는 법에서 더 다룹니다.
이 선택들이 어떻게 ‘관심고객 등록’으로 이어지나?
디자인은 예뻐 보이려고가 아니라 전환을 만들려고 합니다. 어반 미드나잇·중앙정렬·시네마틱은 각각 다른 길로 같은 목적지를 향합니다. 다크 톤과 골드 포인트는 신뢰와 격을 만들어 ‘아무 데서나 분양하는 단지가 아니다’라는 인상을 주고, 중앙정렬·다크 카드는 시선을 등록 버튼까지 흐트러지지 않게 안내합니다. 9초 켄번즈·커튼 리빌은 이탈을 늦춰 체류 시간을 벌고, 그 사이 핵심 가치와 관심고객 등록 폼이 자연스럽게 눈에 들어옵니다. 몰입 → 신뢰 → 머무름 → 등록. 이 순서가 끊기지 않게 색·정렬·모션을 한 방향으로 정렬한 것이 이 데모의 핵심입니다. 전환을 만드는 설계 원칙은 전환되는 분양 사이트 디자인 원칙에 정리했습니다.
왜 ‘골격 복제’가 아니라 이 현장만을 위한 베스포크인가?
같은 다크 템플릿을 색만 바꿔 모든 현장에 돌리면 빠르고 싸지만, ‘도시의 중심’은 느껴지지 않습니다. 우리는 현장마다 컨셉 → 색 → 정렬 → 모션을 처음부터 다시 짭니다. 시티오씨엘7의 미드나잇·9초 켄번즈는 이 현장이라서 나온 답이고, 다른 현장에 그대로 옮기면 어색해집니다. 골격을 복제하지 않고 현장마다 1:1로 설계하는 이유와 그 차이는 왜 베스포크인가에서 자세히 적었습니다. 우리가 어떤 범위로 작업하는지는 분양 사이트 제작 안내에서 확인할 수 있습니다.
자주 묻는 질문
시티오씨엘7 데모는 왜 밝은 화이트가 아니라 다크(미드나잇)로 갔나요?
왜 중앙정렬과 다크 카드 레이아웃을 썼나요?
9초 켄번즈와 커튼 리빌은 어떤 효과를 노린 건가요?
이 데모는 실제 의뢰를 받아 만든 건가요?
우리 현장도 이렇게 설계할 수 있을까?
현장 컨셉만 주시면, 색·정렬·모션을 그 현장만을 위해 처음부터 설계한 방향을 무료로 제안드립니다. 골격을 복제하지 않습니다.
무료 견적 받기※ 본 글은 시티오씨엘7단지 리디자인 컨셉 데모의 디자인 근거를 기록한 제작 노트입니다. 이미지·포트폴리오·데모는 PLOT이 역량 시연을 위해 자체 제작한 것으로 실제 의뢰·감수·승인을 받은 것이 아니며, 분양 관련 표기는 해당 현장의 입주자모집공고와 분양계약을 우선합니다. 169개·36종+는 PLOT의 실제 작업·라이브러리 수치이고, 검증되지 않은 외부 통계·후기는 사용하지 않았습니다(날조 0). 최종 업데이트 .