[기업] 아파트 홍보 홈페이지 「화랑어반트리움」

서울 성북구 석관동의 242세대 민간임대 주택 「화랑어반트리움」이 입주자 모집을 앞두고, 단지를 소개하고 문의 전화를 받을 홍보 홈페이지를 의뢰한 작업입니다. 기획서부터 디자인 시안, 제작, 도메인 연결, 운영 인수인계까지 맡았습니다.

의뢰와 목표

받은 자료는 조감도와 로고, 시공 도면, 22쪽 층별 도면, 입면도, 세대·커뮤니티 사진 33장이었습니다. 고객사가 바란 것은 세 가지였습니다.

• 역세권을 가장 크게 — 6호선 돌곶이역과 1호선 석계역, 두 역이 가깝다는 점을 첫 화면부터
• 심플하고 빠르게 — 정해진 오픈 날짜에 맞춰, 꼭 필요한 내용만 깔끔하게
• 직접 관리할 수 있게 — 공지사항과 모집공고 PDF는 담당자가 직접 올리도록

메뉴는 사업안내 · 단지안내 · 입주자 모집 · 고객센터 네 개로 기획서에서 먼저 맞췄고, 상담부터 정식 주소 오픈까지 2주가 걸렸습니다.

시안 세 가지, 고객이 고른 A

먹 · 금의 프리미엄(A), 화이트 · 레드의 밝고 젊은 톤(B), 큰 영문 타이포의 어반 에디토리얼(C) 세 방향을 보여 드렸고, 고객사가 고른 A로 전체 페이지를 통일했습니다. 색은 먹(#16140F) · 종이(#F6F3EC) · 금(#B38C4A)에 두 노선의 색만 더했고, 글꼴은 Pretendard 한 가지로 굵기 대신 크기와 여백으로 위계를 나눴습니다.

첫 화면에서 두 역을 말하기

첫 화면에는 네 가지만 두었습니다. 두 역의 이름이 곧 제목(「돌곶이역과 석계역, 두 개의 역을 품은 집」), 실제 노선 색으로 칠한 6호선 · 1호선 배지, 다음 행동은 「입주자 모집 안내」와 「평면 둘러보기」 두 개, 그리고 늘 위에 있는 입주자 지원센터 전화번호입니다.

강점 하나를 끝까지 — 더블역세권

돌곶이역 도보 5분, 석계역 도보 7분. 이 강점을 첫 화면에서 한 번 말하고 끝내지 않고, 단지안내의 프리미엄 맨 앞과 오시는 길 지도까지 같은 노선 색으로 되풀이했습니다. 나머지 강점은 빌트인 풀옵션 · 시스템에어컨 · 붙박이 수납 세 가지만 남겼고, 커뮤니티 시설은 요청대로 작게 소개했습니다.

도면을 읽기 쉬운 화면으로

시공 도면을 그대로 올리지 않고, 18㎡형 · 37㎡형 발코니 확장형 평면을 방 이름만 남겨 다시 그렸습니다. 치수를 빼 달라는 요청에도 바로 대응했고, 벡터라 확대해도 선이 깨지지 않습니다.

22쪽 분량의 층별 도면은 호수 배치가 같은 층끼리 묶어 3층 · 411층 · 1213층 · 14~24층 네 장으로 정리했습니다. 242세대가 몇 층 몇 호에 있는지 한 화면에서 찾을 수 있고, 세대 출입구가 복도 어느 쪽인지도 표시해 방문 전에 위치를 짐작할 수 있습니다.

사진 33장을 공간별로

받은 사진을 외관 · 조감도, 37㎡형, 18㎡형, 커뮤니티 라운지로 나눠 갤러리에 정리했습니다. 큰 조감도와 세대 사진은 화면 크기에 맞게 줄여 보내, 데이터가 느린 곳에서도 금방 뜹니다.

휴대폰에서 먼저 설계

임대 홍보 홈페이지를 찾는 방문자는 대부분 휴대폰으로 들어오므로, 휴대폰 화면을 먼저 설계하고 PC · 태블릿으로 넓혔습니다. 화면 아래에는 「전화 걸기」 버튼을 늘 고정해 손가락 하나로 입주자 지원센터에 닿고, 페이지 안에서는 탭으로 단지 외관 · 동호수 배치 · 평면정보 · 커뮤니티 라운지를 오갑니다. 오시는 길에서는 네이버 지도 · 카카오맵으로 바로 길찾기를 할 수 있습니다.

공지사항 · 자료실은 담당자가 직접

공지사항과 자료실은 담당자가 관리 화면에 로그인해 글을 쓰고 PDF를 올린 뒤 저장하면, 1~2분 뒤 홈페이지에 자동으로 반영됩니다. 정적 사이트(Astro)를 Cloudflare Pages에 올리고 관리 화면은 Pages CMS로 붙여, 별도 관리 서버 없이 무료 요금제로 운영됩니다.

만들고 끝이 아니라, 넘겨서 끝

도메인 · 호스팅 · 원본 코드 저장소 계정을 모두 고객사 명의로 두고 원본 코드를 고객사 계정으로 옮겼습니다. 계정 · 도메인 · 관리 방법 · 남은 자료를 정리한 인수인계서(7쪽)와, 화면 캡처로 따라 하는 글 올리기 가이드(11쪽)를 함께 드렸습니다. 오픈 후에도 도면 치수 제거, 오시는 길 지도와 도보 시간 추가, 동호수 배치의 세대 출입구 표시까지 받은 요청을 그때그때 반영했습니다.

결과

• 2주 — 상담부터 정식 주소(hut2026.com) 오픈까지
• 5분 · 7분 — 첫 화면부터 끝까지 보이는 두 역
• 0원 — 서버 비용 없이 담당자가 직접 운영