개요
핵심 요약 — Susie & Jay는 두 사람의 결혼 소식을 전하는 디지털 청첩장 웹사이트다. 종이 청첩장의 형식을 화면에 옮기는 대신, 밤안개 낀 도심을 나란히 바라보는 두 사람의 뒷모습 위에 세리프 로고타입을 얹어 단편 영화의 오프닝처럼 문을 연다. 첫 화면에 남긴 버튼은 시작하기 하나뿐이고, 하단에는 우리의 만남·사랑의 여정·결혼식 세 개의 장(章)이 가는 선과 점으로 이어진 타임라인 형태로 놓였다. 이번 리뷰에서는 이 극도로 절제된 구성이 어떻게 몰입을 만드는지, 그리고 초대장이라는 목적에 맞춰 공유와 성능 면에서 무엇을 보강할 수 있는지 짚는다.
브랜드 & 메시지
이 사이트의 헤드라인은 문장이 아니라 이름 그 자체다. 획 대비가 강한 세리프체로 쓴 Susie & Jay가 은은한 블루 톤으로 빌딩 숲 한가운데 떠 있고, 그 아래로 앰버색 가로등 불빛과 차가운 유리 커튼월의 푸른빛이 난색·한색 대비를 이룬다. 결과적으로 화면 전체가 영화 포스터의 문법을 따른다. CTA도 같은 태도를 지킨다. 가느다란 흰 외곽선만 두른 시작하기 버튼은 클릭을 재촉하는 대신 이야기의 첫 페이지를 넘겨 보라고 조용히 권한다. 내비게이션 역시 메뉴라기보다 목차에 가깝다. 우리의 만남에서 사랑의 여정을 지나 결혼식으로 향하는 세 장의 라벨이 연애의 시간순을 그대로 따라가며, 방문자는 메뉴를 고르는 게 아니라 서사의 어느 지점에 서 있는지를 확인하게 된다.
UX/UI 관점
UX/UI 관점에서 눈에 띄는 강점은 다섯 가지다. 첫째, 실루엣 연출. 두 사람의 얼굴을 보여주지 않고 뒷모습만 담아, 보는 이가 자신의 기억을 겹쳐 보게 만드는 여백을 남겼다. 둘째, 타이포그래피가 곧 아이덴티티다. 별도의 그래픽 장식 없이 세리프 로고타입 하나로 프리미엄한 인상을 완성했고, 이는 웹디자인에서 폰트 선택이 얼마나 큰 지분을 갖는지 보여주는 사례다. 셋째, 선택지의 최소화. 첫 화면의 행동 유도는 시작하기 단 하나여서 하객이 무엇을 눌러야 할지 고민할 일이 없다. 넷째, 진행 표시기를 겸하는 챕터 내비게이션. 점과 선으로 이어진 세 개의 장은 현재 위치와 남은 이야기를 동시에 알려준다. 다섯째, 게스트를 배려한 유틸리티 바. 사운드 토글, 달 아이콘의 다크 모드, EN 언어 전환을 하단에 모아 외국인 하객과 조용한 환경의 사용자까지 품었다. 장식을 덜어낸 만큼 남은 요소 하나하나가 제 역할을 한다.
IA·SEO 전략
청첩장 사이트의 유통 경로는 검색이 아니라 메신저다. 카카오톡과 문자로 링크가 오가는 만큼, 미리보기 카드가 사실상의 첫인상이 된다. og:title에 두 사람의 이름과 예식 일자를 함께 담고, og:image는 움직이는 영상 대신 로고타입이 선명하게 읽히는 정적 포스터 프레임으로 지정하는 것이 우선 과제다. 여기에 Event 구조화 데이터로 예식 날짜·시간·장소를 선언해 두면 링크 공유 시 정보 전달력이 한층 올라간다. 정보 구조 면에서는 세 개의 장에 각각 해시 URL을 부여할 것을 권한다. 어른들께는 결혼식 장으로 바로 이동하는 링크를, 친구들에게는 처음부터 보는 링크를 따로 보낼 수 있어 같은 웹사이트가 수신자에 따라 다르게 작동한다. EN 토글이 있는 만큼 html lang 속성 전환과 영문 메타 병기까지 정리하면 다국어 대응이 완결된다.
성능·접근성
하단의 사운드 토글로 미루어 배경은 영상으로 보이는데, 그렇다면 이 풀스크린 배경은 사이트의 심장이자 가장 무거운 자산이다. 하객 대부분이 메신저 인앱 브라우저, 그것도 모바일 네트워크에서 접속한다는 점을 감안하면 첫 프레임 전략이 관건이다. 영상이 로드되기 전 동일 장면의 포스터 이미지를 먼저 띄워 LCP를 확보하고, 모바일에는 해상도를 낮춘 별도 소스를 내려보내는 이원화를 권한다. 획 대비가 큰 세리프 디스플레이 폰트는 서브셋과 프리로드로 로고타입이 가장 먼저 그려지게 잡아야 한다. 사운드는 기본 꺼짐을 원칙으로 하고, 토글 상태를 아이콘만이 아니라 레이블로도 알려주면 좋다. 다크 모드에서는 앰버 불빛 위 흰 텍스트의 대비가 유지되는지, 시작하기의 가는 외곽선 버튼이 저시력 사용자에게도 충분히 보이는지 점검이 필요하다. 어두운 배경의 웹사이트 제작에서 대비 관리란 분위기와 가독성 사이의 줄타기다.
디지털 파트너 더블루캔버스
Susie & Jay가 보여주듯, 잘 만든 초대장 하나는 그 자체로 브랜드가 된다. 청첩장, 행사 초청, 팝업 스토어, 브랜드 캠페인처럼 짧고 굵게 각인돼야 하는 페이지일수록 첫 화면의 밀도와 스토리 설계가 성패를 가른다. The Blue Canvas는 이런 스토리텔링형 홈페이지 제작을 기획 단계부터 함께한다. 어떤 장면으로 문을 열지, 방문자를 어떤 순서로 데려갈지 설계하고, 웹디자인과 개발로 구현한 뒤, SEO와 메신저 공유 최적화·퍼포먼스 마케팅으로 도달 범위를 넓힌다. 보여주고 싶은 이야기가 있다면, 그 이야기에 맞는 홈페이지 제작 파트너를 만나는 것부터가 시작이다.
마무리와 다음 스텝
Susie & Jay는 덜어냄으로 완성한 청첩장이다. 밤의 도시, 두 사람의 뒷모습, 세리프 로고타입, 버튼 하나. 이 네 가지만으로 방문자를 이야기 안으로 끌어들인다. 여기에 세 가지를 더하면 경험이 한층 단단해진다. 먼저 포스터 프레임과 모바일 전용 영상 소스로 첫 화면 로딩을 앞당길 것. 다음으로 og 메타와 Event 구조화 데이터를 정비해 카카오톡 미리보기에서부터 예식 정보가 읽히게 할 것. 마지막으로 장별 해시 URL을 열어 결혼식 정보로 직행하는 링크를 만들 것. 무드는 이미 충분하니, 남은 일은 그 무드가 어떤 기기와 네트워크에서도 흔들리지 않게 받쳐주는 것이다.