더샵 천안라크원 Website Design Review

개요

더샵 천안라크원은 천안 성성호수공원 인근에 들어서는 공동주택의 분양 사이트다. 확인 시점 기준으로 이 사이트는 완성된 분양 사이트가 아니라 티저다. 단지안내, 평형안내, 분양안내 같은 실질 정보는 COMING SOON으로 잠겨 있고, 열려 있는 것은 사업개요와 요약, 그리고 관심고객등록뿐이다.

정보가 없다는 조건에서 사이트가 택한 방법은 주제를 만드는 것이다. 첫 화면은 별이 흐르는 검은 우주에 달 여러 개가 떠 있고, 그 위에 ‘THE AESTHETICS OF ESSENCE’가 크게 놓인다. 아래에는 ‘기다림 끝에 완성된 본질의 미학’이라는 국문이 작게 붙는다. 아직 보여줄 것이 없다는 사실을 결점이 아니라 컨셉으로 전환한 셈이다. 이번 리뷰에서는 이 티저 전략이 관심고객등록이라는 단 하나의 전환으로 이어지는 방식과, 그 과정에서 놓치고 있는 검색 기반을 살펴본다.

브랜드 & 메시지

브랜드 언어는 ‘기다림’ 하나로 통일돼 있다. ‘기다림 끝에 완성된 본질의 미학’, ‘기다림의 가치를 이해하는 작품’, ‘Elevated by the art of waiting’, ‘Waiting is finally over’. 같은 단어를 국문과 영문으로 번갈아 반복하면서, 아직 공개되지 않았다는 상태 자체를 브랜드 서사로 만든다. 분양 티저에서 흔히 쓰는 ‘곧 공개’라는 사무적 표현 대신, 기다림을 미덕으로 재정의한 화법이다.

시각 언어는 검정과 흰색, 그리고 천체 이미지로 좁혀져 있다. 컬러를 거의 쓰지 않고, 대신 텍스트를 한 글자씩 분리해 시차를 두고 등장시키는 조판 애니메이션에 힘을 실었다. ‘T h e A e s t h e t i c s o f E s s e n c e’, ‘T H E S H A R P’처럼 문자가 하나씩 자리를 잡는 연출은 정보가 적은 화면에서 체류 시간을 만드는 장치이면서, 동시에 ‘시간이 걸려 완성된다’는 메시지의 시각적 번역이기도 하다.

UX/UI 관점

강점은 다섯 가지로 정리된다. 첫째, 메뉴를 열린 것과 잠긴 것으로 명확히 구분했다. 사업개요·요약·관심고객등록만 활성화하고 나머지는 COMING SOON으로 표시해, 사용자가 없는 정보를 찾아 헤매지 않는다. 둘째, 사업개요를 대지위치·대지면적·연면적·규모·건폐율/용적률·세대수 항목으로 표처럼 정리했다. 티저 단계에서 유일하게 확정된 사실을 가장 읽기 쉬운 형식으로 제공한 판단이다.

셋째, 관심고객등록을 상단 메뉴·히어로 배지·하단 섹션 세 곳에 반복 배치해 어느 지점에서든 전환이 가능하게 했다. 티저 사이트의 목적이 오직 리드 확보라는 점을 화면 배치가 그대로 반영한다. 넷째, 등록 안내를 카카오톡 채널 추가 방식으로 도식화해 ‘검색창 클릭 → QR 스캔 → 설문 조사 → 홈에서 채널추가’ 네 단계를 그림으로 보여준다. 폼 작성보다 심리적 부담이 낮은 경로를 함께 제시한 셈이다. 다섯째, CG와 이미지가 실제와 다를 수 있다는 고지를 각 구획마다 반복 노출했다. 분양 광고에서 분쟁 소지가 큰 부분을 성실하게 처리한 대목이다. 여섯째, 시행·시행수탁·시공·온라인 대행사를 푸터에 모두 밝혀 사업 주체를 투명하게 드러냈다.

IA·SEO 전략

가장 눈에 띄는 문제는 제목 구조다. 문서 안에 h1이 여러 개 존재하고 그중 둘은 ‘로고’라는 텍스트이며, 실제 카피를 담은 h1은 글자가 하나씩 분리된 상태다. 검색엔진은 이 문자열을 정상적인 문장으로 인식하기 어렵다. 시각 효과를 위한 분리는 자식 요소로 처리하고, 마크업 상으로는 온전한 문장이 남도록 하는 것이 기본이다. canonical도 확인되지 않는다.

분양 사이트의 검색 수요는 명확하다. ‘천안 라크원 분양가’, ‘성성호수공원 아파트’, ‘더샵 천안 청약 일정’ 같은 조합이다. 지금 사이트는 이 검색어들에 대응할 텍스트를 거의 갖고 있지 않다. 티저 단계라도 사업개요의 확정 정보 — 세대수, 층수, 위치 — 를 텍스트로 노출하고, description에 지역명과 단지명을 함께 담고, Residence 계열 구조화 데이터로 좌표와 규모를 명시하면 오픈 시점 이전부터 색인이 쌓인다. 분양은 공개 후 짧은 기간에 승부가 나는 상품이므로, 티저 기간 동안 검색 기반을 미리 만들어 두는 것이 특히 중요하다. 국문 도메인만 운영하는 점도 검토가 필요하다. 공유와 광고 링크에서 인코딩 문제가 발생할 수 있어, 영문 도메인을 함께 두고 canonical로 하나를 지정하는 편이 안전하다.

성능·접근성

배경 영상과 대형 이미지, 임베드 요소가 다수 사용된 구조라 첫 화면의 무게가 상당하다. 특히 문서 안에 임베드 프레임이 스무 개 넘게 확인되는데, 티저 단계의 콘텐츠 양을 감안하면 과한 편이다. 필요한 시점에만 로드하도록 지연 처리하거나, 오픈 이후 실제 콘텐츠가 들어올 자리만 남기고 정리하는 편이 좋다. 히어로 영상에는 poster를 지정하고, 모바일에서는 정지 이미지로 대체하는 분기를 두면 체감 속도가 크게 개선된다.

접근성 측면에서 글자 단위 분리 조판은 주의가 필요하다. 스크린리더가 문장을 철자 하나씩 읽게 되면 내용 전달이 사실상 불가능해진다. 시각적 분리는 유지하되 보조기기에는 완전한 문장이 전달되도록 대체 텍스트를 함께 제공해야 한다. 별이 흐르고 달이 움직이는 배경 애니메이션도 `prefers-reduced-motion` 설정을 존중해 정지 옵션을 두는 것이 바람직하다. 확인 시점 기준 대표번호가 자리표시 형태로 노출된 지점이 있는데, 운영 중인 사이트에서는 실번호로 채우거나 노출을 미루는 편이 신뢰에 유리하다.

자주 묻는 질문

디지털 파트너 더블루캔버스

분양 사이트는 수명이 짧고 목표가 단일하다. 티저에서 관심고객을 모으고, 오픈 후 청약으로 넘긴다. 그래서 화면 완성도만 챙기고 검색 기반은 비워두는 경우가 많은데, 정작 청약 시점에 ‘단지명 분양가’를 검색한 사람들이 공식 사이트가 아니라 부동산 커뮤니티나 블로그로 흘러간다.

The Blue Canvas(더블루캔버스)는 분양·부동산 브랜드의 홈페이지 제작에서 티저 단계부터 검색 자산을 쌓는 방식으로 작업한다. 확정 정보를 텍스트와 구조화 데이터로 남기고, 관심고객등록까지의 동선을 최단으로 만들고, 오픈 이후 콘텐츠가 들어올 자리를 미리 설계한다. 짧은 기간에 성과를 내야 하는 상품일수록 준비 기간의 설계가 결과를 가른다.

The Blue Canvas 홈페이지 제작 문의

마무리와 다음 스텝

더샵 천안라크원의 티저 사이트는 ‘보여줄 것이 없다’는 조건을 기다림이라는 주제로 전환하는 데 성공했다. 열린 메뉴와 잠긴 메뉴를 구분하고, 확정 정보를 표로 정리하고, 관심고객등록을 세 곳에 반복 배치한 구성은 티저의 목적에 정확히 맞는다. 고지 문구를 성실히 반복한 점도 분양 사이트에서는 중요한 미덕이다.

실행 제안은 셋이다. 첫째, 글자 단위로 분리된 카피를 마크업 상 온전한 문장으로 복원하고 h1을 하나로 정리한다. 둘째, 사업개요의 확정 정보를 텍스트로 노출하고 지역·단지명을 담은 description과 구조화 데이터를 추가해 오픈 전부터 색인을 쌓는다. 셋째, 임베드와 영상 자산을 정리하고 모바일 대체 이미지를 적용해 첫 화면 로딩을 줄인다. 컨셉은 이미 자리를 잡았으니, 남은 것은 그 컨셉이 검색에서도 발견되게 만드는 일이다.