개요
한눈에 — DRAFT.X는 스스로를 'Remote Based Global Studio'로 소개하는 하이엔드 웹디자인·브랜딩 스튜디오다. 첫 화면을 열면 군더더기를 걷어낸 새카만 배경 위로 화면 폭을 가득 채운 'DRAFT.X' 워드마크가 먼저 눈에 박힌다. 글자 뒤로는 유모차·세럼·필라테스 스튜디오·패션 컷이 콜라주처럼 겹치고, 오른쪽에는 '10+ years of aesthetic mastery meets high-end strategy, delivering essential changes for your brand.'라는 영문 헤드라인과 '축적된 심미적 안목이 하이엔드 전략과 만나, 브랜드에 본질적인 변화를 선사합니다'라는 국문 카피가 나란히 붙는다. 제작사가 자기 홈페이지 제작 실력을 스스로 증명해야 하는 업종인 만큼, 이번 리뷰는 이 원페이지가 포트폴리오와 수상 이력, 가격까지 한 스크롤로 엮어내는 방식과 그 안에서 UX/UI 동선이 얼마나 매끄럽게 짜였는지를 화면 근거로 짚는다.
브랜드 & 메시지
상단 내비게이션은 HOME · WORKS · LAB.X · CONTACT 네 개로 눌러 담았고, 우측 끝에는 '2OY Heritage // 14일 사이트 완성'이라는 배지형 문구가 걸려 있다. 20년 헤리티지라는 권위와 '2주면 웹사이트 제작이 끝난다'는 속도 약속을 한 줄에 병치한 셈인데, 스튜디오의 관록과 실무적 이점을 동시에 파는 영리한 카피다. 톤앤매너는 처음부터 끝까지 블랙 모노크롬을 밀고 가고, 유일하게 튀는 색은 가격표의 Signature 카드에 칠한 라임그린 하나다. 이 절제 덕분에 그 초록 버튼이 자연스럽게 시선의 종착지가 된다. 대문자 산세리프 워드마크는 히어로에서 시작해 푸터에서 다시 한 번 화면을 가득 채우며 브랜드 이름을 각인시킨다. 'SEE WORKS', 'MASTER PROCESS GUIDE (PDF)' 같은 CTA도 행동이 분명하다. 한 가지 걸리는 지점은 연차다. 히어로 영문은 '10+ years'라고 적었는데 내비 배지와 국문 카피, 푸터('20 Years of Heritage')는 모두 20년을 말한다. 브랜드의 핵심 자산인 경력이 화면마다 다르게 적히면, 이 정도로 공들인 웹디자인의 신뢰감이 미세하게 새어 나간다.
UX/UI 관점
화면에서 확인되는 강점은 뚜렷하다. 첫째, 스크롤을 시작하기도 전에 브랜드 이름부터 확실히 새기는 거대 워드마크 전략이다. 둘째, 흑백으로 절제한 팔레트에 라임그린 하나만 심어 시선 우선순위를 명료하게 통제한다. 셋째, 포트폴리오 그리드가 잘 짜였다. MUK의 'THE ART OF URBAN STYLE', Arche의 'The Origin Of Your Strength', VELO의 'Precision in Motion', OTIUM의 'The Art of Essential Rest'까지 각 사례에 대괄호 카피 태그와 'VIEW' 필 버튼을 붙여, 클릭할 수 있다는 신호(affordance)를 분명히 준다. 넷째, 'How we craft essentials' 구간은 '직관과 데이터의 전략적 설계', '독보적 서사를 담은 AI 비주얼 생성' 등 여섯 항목을 아코디언으로 접어 정보 밀도를 스스로 조절한다. 다섯째, 'Awards (27)' 테이블은 히다랩·현대 한스톤·아모레퍼시픽·LG그룹 같은 실명 레퍼런스를 연도와 함께 정렬해 강력한 사회적 증거로 작동한다. 여섯째, 가격을 Essential(350만~)·Signature(450만~)·Masterpiece(별도 협의) 3단으로 공개하고 각각 10일·14일·20일 Launch 기간까지 명시해, B2B 리드가 문의 전에 스스로 판단할 재료를 미리 쥐여 준다. '보여주고-증명하고-값을 매기는' 흐름이 원페이지 안에서 끊기지 않는 점이 이 UX/UI의 미덕이다.
IA·SEO 전략
지금 구조의 가장 큰 아쉬움은 모든 이야기를 URL 하나에 담은 원페이지라는 점이다. WORKS의 MUK·OTIUM·VELO·Arche는 각각 완결된 케이스인데, 앵커로만 연결돼 있어 검색엔진이 개별 사례를 색인할 표면적이 없다. 'draftx.co.kr/works/otium'처럼 프로젝트별 상세 페이지로 분리하면, 각 브랜드명과 카테고리(유아용품 브랜딩, 뷰티 패키지, 아키텍처 웹사이트 제작 등)로 들어오는 롱테일 검색을 그대로 끌어올 수 있다. 카피가 영문 위주라는 점도 국내 유입 관점에서는 손해다. 국내 클라이언트를 겨냥한다면 title·h 태그·본문에 '홈페이지 제작', '브랜드 웹사이트 제작', '웹디자인 스튜디오' 같은 국문 검색 의도 키워드를 확보해야 한다. 화면을 채운 'DRAFT.X' 글자가 실제 h1 텍스트인지 이미지인지도 점검해야 한다. 이미지라면 검색엔진이 정작 브랜드 이름을 못 읽는다. 반면 현대·아모레·LG로 이어지는 수상/브랜드 실명은 그 자체로 강한 신뢰 신호이니, Organization·awards 구조화 데이터와 서비스·가격을 담은 Offer 스키마로 마크업하면 검색 결과에서의 존재감을 한층 키울 수 있다.
성능·접근성
이 사이트는 시각적으로 무겁다. 히어로에 겹친 다수의 인물·제품 컷, 하단 아카이브의 이미지 스트립, 풀블리드 목업 스크린샷까지 고해상도 이미지가 촘촘하다. 원페이지 롱스크롤이라 초기 진입에서 전 구간 자원이 한꺼번에 로딩되면 LCP와 전송량이 함께 부풀기 쉽다. 이미지를 WebP·AVIF로 변환하고 반응형 srcset을 붙이며, 뷰포트 밖 자원은 지연 로딩으로 넘기는 최적화가 체감 속도를 곧바로 끌어올린다. 접근성 쪽에서는 대비가 관건이다. 블랙 배경 위에 'essence of presence'처럼 저채도 회색으로 흐리게 처리한 텍스트가 곳곳에 있는데, 이 구간은 WCAG AA 대비 기준에 미달할 소지가 있으니 실제 명도비를 측정해 톤을 조정하는 편이 좋다. 호버 시 뜨는 'VIEW' 필이 키보드 포커스에서도 동작하는지도 함께 살펴야 한다. 마지막으로 신뢰 요소 하나. 20년 글로벌 스튜디오를 표방하면서 연락처가 개인 gmail(surpas250@gmail.com)로 노출되는데, 도메인 기반 메일로 바꾸면 브랜드 정합성과 메일 전달력이 함께 올라간다.
디지털 파트너 더블루캔버스
DRAFT.X처럼 스튜디오·에이전시나 프리미엄 브랜드의 홈페이지 제작을 고민하고 있다면, 관건은 '멋진 화면'이 아니라 그 화면이 검색에 걸리고 문의로 이어지는 구조인지다. The Blue Canvas(더블루캔버스)는 브랜드 서사를 잡는 기획설계부터 웹디자인, 개발, 그리고 발행 이후의 검색엔진최적화(SEO)와 퍼포먼스 마케팅까지 하나의 흐름으로 설계한다. 오늘 리뷰에서 짚은 원페이지의 색인 한계, 국문 키워드 부재, 이미지 성능 부담 같은 지점은 우리가 웹사이트 제작 단계에서 미리 잠그는 항목들이다. 포트폴리오는 검색 유입을 만드는 상세 페이지로, 수상·레퍼런스는 구조화 데이터로, 가격·문의는 전환 동선으로 엮는다. 프리미엄한 첫인상과 성과를 함께 원한다면 아래에서 협업 사례와 역량을 확인해 보세요.
마무리와 다음 스텝
DRAFT.X는 절제된 블랙 무드와 대형 워드마크, 실명 레퍼런스로 '하이엔드 스튜디오'라는 인상을 설득력 있게 세운다. 화면 완성도만 놓고 보면 이미 상위권이다. 다만 완성도를 검색 유입과 전환으로 환산하려면 세 가지를 손봐야 한다. 첫째, '10+ years'와 '20년'으로 갈린 연차 카피를 통일하고 gmail을 도메인 메일로 바꿔 신뢰의 결을 맞춘다. 둘째, 원페이지를 프로젝트별 상세 페이지로 분리하고 '홈페이지 제작' 등 국문 SEO 키워드를 확보해 검색 표면적을 넓힌다. 셋째, 히어로와 아카이브 이미지를 WebP·지연 로딩으로 최적화하고 저대비 캡션의 명도비를 정리해 성능과 접근성의 바닥을 다진다. 지금의 미감에 이 세 가지 위생 항목만 얹으면, 보여주는 웹사이트에서 벌어들이는 웹사이트로 넘어간다.