개요
핵심 요약
- 이 사이트는 HL 디앤아이한라가 운영하는 주거 브랜드 ‘에피트(EFETE)’의 브랜드 허브로, 첫 화면은 ‘EFETE’와 ‘Brilliant Difference’라는 문구만 놓인 어두운 단색 화면으로 시작한다.
- 이어지는 화면에서 ‘월명공원 한라비발디 온더파크’ 같은 진행 단지를 야간 조감도와 함께 소개하고 전화·상담 아이콘 버튼을 배치한다.
- 브랜드 에센스를 Complete Living·Smart Life·Prestige & Dignity 세 가치로 나누고, 이끼 질감의 풀스크린 배경 위에 영문 타이포로 각 가치를 제시한다.
- 도예가·티 큐레이터 등 문화 인물을 소개하는 ‘TREND’ 구획을 두어 분양 정보와 별도로 라이프스타일 콘텐츠를 다룬다.
- 관심고객 등록 페이지를 단지별 고유 URL(/interest/ 뒤에 긴 식별자)로 운영해, 단지마다 별도 랜딩을 두고 있음을 코드에서 확인할 수 있다.
에피트(EFETE)는 HL 디앤아이한라가 운영하는 주거 브랜드 사이트다. 첫 화면은 로고와 ‘Brilliant Difference’라는 영문 태그라인만 놓인 짙은 회갈색 단색 화면으로, 정보 없이 브랜드명만 각인시키는 방식으로 시작한다. 스크롤을 내리면 곧바로 진행 단지 ‘월명공원 한라비발디 온더파크’의 야간 조감도가 전체 화면을 채우며 등장한다.
이어지는 화면은 이끼 질감의 초록빛 배경 위에 ‘BRAND ESSENCE’, ‘Complete Living’이라는 영문 타이포가 놓이고, 그 아래 도예가와 티 큐레이터를 소개하는 라이프스타일 콘텐츠로 이어진다. 상단 내비게이션은 브랜드·분양안내·현장안내·고객서비스 네 메뉴로 구성돼 있다. 이번 리뷰에서는 분양 정보와 라이프스타일 콘텐츠를 화면 톤을 바꿔가며 분리한 구성과, 단지별로 개별 URL을 갖는 관심고객 등록 구조를 살펴본다.
브랜드 & 메시지
브랜드 화법의 핵심은 ‘설명하지 않는 확신’이다. 첫 화면에서 단지 위치나 세대수 같은 정보를 전혀 내세우지 않고 ‘EFETE’, ‘Brilliant Difference’라는 짧은 문구만 배치한다. 브랜드 에센스 구획에서도 ‘Complete Living’, ‘Smart Life’, ‘Prestige & Dignity’처럼 영문 단어를 그대로 노출해, 구체적 설명보다 분위기로 고급 주거 브랜드라는 인상을 먼저 전달하는 방식을 택했다.
시각 언어는 어두운 회갈색·검정과 이끼의 짙은 초록을 오가며, 화면마다 톤을 다르게 써서 구획을 구분한다. 단지 소개는 야간 조감도로 스케일감을, 브랜드 에센스는 이끼 질감으로 자연·고급스러움을, TREND 구획은 도예·차 문화 인물의 사진으로 라이프스타일을 전달한다. 분양 사이트에서 흔한 평면도·시세표 대신, 도예가와 티 큐레이터를 소개하는 ‘MZ세대 작가, ‘한국미’를 발견하다’ 같은 콘텐츠를 배치한 점이 눈에 띈다.
UX/UI 관점
강점은 다섯 가지다. 첫째, 브랜드 로고 화면-단지 소개-브랜드 에센스-라이프스타일 콘텐츠 순서로 톤을 바꿔가며 이어지는 풀페이지 스크롤 구조를 사용해, 정보 밀도가 다른 콘텐츠를 화면 전환으로 구분한다. 둘째, 단지 소개 화면에 홈·목록·전화 아이콘 버튼을 작게 배치해, 몰입감 있는 이미지를 해치지 않으면서도 다음 행동으로 넘어가는 동선을 남겨뒀다.
셋째, 관심고객 등록 페이지를 단지별 고유 URL로 분리해, 여러 단지를 동시에 분양·운영하더라도 각 캠페인을 독립적으로 추적하고 관리할 수 있는 구조를 갖췄다. 넷째, 브랜드 에센스 세 가치를 각각 다른 배경 이미지·타이포 스타일로 표현해, 같은 페이지 안에서도 지루하지 않게 정보를 전달한다. 다섯째, 최신 GSAP·ScrollTrigger와 Splitting.js 같은 라이브러리를 사용해 텍스트 분할 애니메이션을 구현하고 있어, 오래된 구축 흔적(jQuery, Slick)과 최신 스크롤 연출이 함께 쓰이고 있다. 여섯째, 하단 ‘Family Site’ 링크로 HL그룹 계열 사이트와의 연결 고리를 남겨, 브랜드 단독 사이트이면서도 그룹 신뢰도를 함께 빌려온다.
IA·SEO 전략
title은 브랜드명 ‘에피트’ 단독으로만 설정돼 있고, meta description도 ‘빛나는 삶을 완성하는 고품격 라이프’라는 짧은 문구에 그친다. canonical은 설정돼 있지만 JSON-LD 구조화 데이터는 소스에서 확인되지 않았다. og:image 경로도 절대 URL이 아닌 상대 경로(/resources/image/...)로 지정돼 있어, 일부 크롤러나 메신저 미리보기에서 이미지가 정상적으로 표시되지 않을 가능성이 있다.
여러 단지를 동시에 다루는 브랜드 허브 사이트인 만큼, title과 description에 현재 진행 중인 단지명이나 지역명을 반영하면 ‘청주 아파트’, ‘월명공원 한라비발디’처럼 구체적인 검색에 대응하기 쉬워진다. 단지별 URL이 이미 분리돼 있으므로, 각 단지 페이지에 개별 메타 데이터와 RealEstateListing 성격의 구조화 데이터를 적용하는 것도 검토할 만하다.
성능·접근성
야간 조감도, 이끼 질감 풀스크린 이미지, 인테리어·문화 콘텐츠 사진까지 고해상도 이미지가 화면 전체를 채우는 구성이 반복된다. 풀페이지 스크롤 방식은 한 화면 한 화면이 완전히 로드돼야 자연스럽게 넘어가므로, 이미지 용량과 로딩 순서를 세심하게 관리하지 않으면 스크롤 전환이 버벅일 수 있다. jQuery, Slick, GSAP, Splitting.js 등 다수의 스크립트가 동시에 로드되는 점도 초기 로딩 시간에 영향을 줄 수 있다.
접근성 측면에서는 어두운 배경 위 옅은 색 텍스트, 이끼 배경 위 흰 텍스트의 대비를 화면별로 확인할 필요가 있다. 풀페이지 스크롤 구조는 키보드나 스크린리더로 탐색할 때 일반 스크롤과 동작 방식이 달라질 수 있으므로, 건너뛰기 링크나 대체 탐색 경로를 함께 제공하는 편이 좋다.
자주 묻는 질문
여러 단지를 함께 운영하는 분양 브랜드 홈페이지는 어떻게 구성해야 하나요?
브랜드 전체를 소개하는 허브 페이지와 단지별 개별 페이지를 분리하는 구성이 일반적입니다. 에피트처럼 관심고객 등록을 단지별 고유 URL로 나누면 캠페인마다 반응을 따로 추적할 수 있습니다.
분양 사이트에 평면도나 시세 정보 대신 라이프스타일 콘텐츠를 넣는 것이 효과가 있나요?
브랜드 이미지를 먼저 각인시키려는 목적이라면 효과적일 수 있습니다. 다만 실수요자는 결국 평면도, 위치, 일정 같은 구체 정보를 찾으므로 라이프스타일 콘텐츠와 실용 정보로 가는 동선을 함께 마련하는 것이 안전합니다.
부동산·분양 홈페이지에 og:image를 상대 경로로 설정해도 되나요?
가능은 하지만 카카오톡, 문자 미리보기 등 일부 환경에서 이미지가 표시되지 않을 위험이 있습니다. 분양 정보는 링크 공유로 확산되는 경우가 많아 og:image를 절대 URL로 지정하는 편이 안전합니다.
풀페이지 스크롤 방식의 분양 사이트는 접근성 면에서 문제가 없나요?
스크롤 방식 자체보다 키보드·스크린리더 탐색 경로가 일반 스크롤과 다르게 동작할 수 있다는 점을 신경 써야 합니다. 건너뛰기 링크나 대체 메뉴를 함께 제공하면 이 문제를 줄일 수 있습니다.
디지털 파트너 더블루캔버스
여러 단지를 동시에 운영하는 주거 브랜드는 브랜드 전체의 인상과 개별 단지의 실용 정보를 한 사이트 안에서 함께 다뤄야 한다. 브랜드 이미지만 강조하면 실수요자가 필요한 정보를 찾는 데 시간이 걸리고, 반대로 단지 정보만 나열하면 브랜드로서의 일관된 인상을 남기기 어렵다.
The Blue Canvas(더블루캔버스)는 분양·주거 브랜드 홈페이지에서 브랜드 허브와 단지별 랜딩을 구조적으로 분리하고, 각 단지 페이지에 필요한 메타 데이터와 구조화 데이터를 함께 설계한다. 캠페인마다 성과를 추적할 수 있는 URL 구조를 갖추는 일도 이 과정에 포함된다.
마무리와 다음 스텝
에피트(EFETE)의 사이트는 이미지와 타이포로 브랜드 분위기를 먼저 전달하는 방식이 인상적이며, 단지별로 관심고객 등록 URL을 분리해 둔 점은 여러 단지를 동시에 운영하는 브랜드에 필요한 실무적 설계다. 다만 검색 노출과 이미지 공유 측면에서는 브랜드 이미지만큼 정비되지 않은 부분이 남아 있다.
실행 제안은 셋이다. 첫째, og:image를 절대 URL로 바꾸고 메신저·SNS 공유 시 이미지가 정상 노출되는지 확인한다. 둘째, title·description에 진행 중인 단지명과 지역명을 반영해 구체적인 검색 수요에 대응한다. 셋째, 풀페이지 스크롤 구조에서 키보드·스크린리더 탐색 경로를 점검해 접근성을 보완한다.
