개요
핵심 요약 — towards(towards.co.kr)는 스스로를 이렇게 소개한다. "투워즈는 브랜드의 방향을 같이 찾고, 웹으로 완성하는 스튜디오입니다. 감도 있는 디자인을 직접 만들고, 직접 구현합니다. 디자인도, 구축도. 처음부터 끝까지." 브랜드 방향 설정에서 시작해 아임웹 기반 구축(Imweb Build)까지 한 팀이 끝내는 구조를 서비스 항목에 그대로 명시했다. 웹디자인 스튜디오의 홈페이지는 그 자체가 포트폴리오 1번이다. 이번 리뷰는 이미지 한 장 없이 타이포그래피만으로 세운 히어로, F&B부터 정부 프로젝트까지 걸린 Featured Work 진열대, 그리고 상담부터 오픈까지 6단계를 통째로 공개한 프로세스 섹션이 어떻게 신뢰를 쌓는지 살핀다.
브랜드 & 메시지
첫 화면의 "we are working towards what's next."는 헤드라인이자 브랜드 선언이다. 브랜드명 towards가 문장 속 전치사로 자연스럽게 녹아 있고, 문장 끝의 마침표는 로고 "towards."의 마침표와 같은 문법을 쓴다. 붉은 커서 포인트 하나가 아이보리 바탕과 검은 로어케이스 타이포 사이에서 유일한 컬러 악센트로 박힌다. 이름 자체가 카피가 되는, 스튜디오가 자기 감각을 증명하는 방식이다.
네비게이션은 WORK·ABOUT·SERVICE·CONTACT 네 개로 끝. 우상단에는 다크 버튼 "지금 바로 문의하기"가 상시 떠 있어 문의 동선이 어느 스크롤 지점에서도 한 클릭이다. 말투도 일관된다. 프로세스 섹션 헤드라인 "복잡하지 않아요. 단계마다 같이 확인하고, 방향을 맞춰가며 완성합니다"는 광고 문구가 아니라 상담 테이블의 언어다. 감도 높은 비주얼과 낮은 문턱의 화법, 이 온도차가 towards의 톤앤매너를 만든다.
UX/UI 관점
첫째, 노이미지 히어로. 사진이나 목업 없이 대형 산세리프 타이포만으로 첫인상을 완성했다. 타이포 감각이 곧 실력인 업종에서 이보다 정직한 증거물은 없다. 둘째, 포트폴리오 라벨링. 'F&B | creafarm', 'Studio | studio264', 'Government | seoul going together'처럼 업종과 프로젝트명을 병기해 카드 한 장만 봐도 수행 범위가 읽힌다. GRID/LIST 토글로 탐색 방식의 선택권까지 준다. 셋째, 프로세스의 전면 공개. Consultation부터 Reference, Main Draft, Full Draft, Build, Launch까지 번호 매긴 6단계에 한국어 설명과 태그 칩을 붙였다. 견적과 일정이 불투명해 생기는 발주자의 불안을 정면으로 지운 설계다.
넷째, 3색의 절제. 아이보리 배경, 블랙 타이포, 레드 포인트만 쓰고 가는 괘선으로 구획하니 creafarm의 레드 박스나 seoul 프로젝트의 핑크 같은 포트폴리오 썸네일 컬러가 오히려 주인공으로 도드라진다. 다섯째, 이중 위계 시스템. Featured Work, Process, Our Service 같은 소문자 영문 라벨 아래 큰 한국어 헤드라인을 놓는 규칙이 전 섹션에서 반복돼 리듬이 생긴다. 여섯째, 서비스 3단 구성에서 Brand Direction 행만 블랙 바로 반전시켜 '설계가 먼저'라는 우선순위를 시각적으로 못 박았다.
IA·SEO 전략
포트폴리오 중심 사이트의 고질적 약점은 검색엔진이 읽을 텍스트가 없다는 것이다. 썸네일 이미지가 콘텐츠의 전부라면 creafarm이나 studio264 프로젝트로 유입될 검색 면적이 사실상 0에 가깝다. 각 프로젝트를 개별 URL의 케이스스터디로 승격시켜 과제·해결·결과를 텍스트로 남기고 고유한 title과 meta description을 부여하는 것이 첫 번째 과제다. 두 번째는 검색어 수렴이다. '아임웹 홈페이지 제작', '브랜드 웹사이트 제작' 같은 실제 발주자의 검색어를 SERVICE 하위 페이지가 받아내도록 구조를 짜면, 지금의 감각적인 메인은 전환용 랜딩으로 온전히 힘을 쓸 수 있다. 셋째, 이미 잘 정리된 6단계 프로세스는 FAQ 구조화 데이터의 좋은 재료다. 마지막으로 WORK·ABOUT·SERVICE·CONTACT가 원페이지 앵커가 아닌 독립 URL로 존재하는지 점검할 것 — 인덱싱 면적이 한 페이지로 줄어드는 것은 스튜디오 사이트가 가장 흔하게 치르는 비용이다.
성능·접근성
타이포그래피가 주인공인 사이트에서는 웹폰트가 곧 LCP다. 히어로의 대형 영문 산세리프와 한국어 본문 폰트를 서브셋으로 줄이고 프리로드하며 font-display 정책을 정해두는 것이 체감 속도의 대부분을 결정한다. Featured Work 썸네일 네 장은 WebP 병행 제공과 뷰포트 밖 지연 로딩으로 충분히 가벼워진다. 히어로 아래의 아스키아트풍 그래픽은 이미지 대신 텍스트나 SVG로 유지하면 용량 부담이 거의 없다. 아임웹 빌더 환경은 서드파티 스크립트 제어 폭이 좁으므로, 결국 이미지 용량과 폰트 전략이 손에 쥔 실질 레버다. 접근성에서는 태그 칩과 캡션류 소형 회색 텍스트의 명도 대비, 그리고 GRID/LIST 토글의 키보드 조작 가능 여부를 점검 목록 맨 위에 두길 권한다.
디지털 파트너 더블루캔버스
디자인 스튜디오, 에이전시, 브랜드 사이트처럼 홈페이지의 만듦새가 곧 영업력인 업종이라면 towards의 사례에서 배울 점이 분명하다. 다만 감각적인 화면은 시작일 뿐, 검색에서 발견되고 문의로 전환되기까지의 설계가 뒤따라야 투자가 회수된다. The Blue Canvas는 홈페이지 제작과 웹사이트 제작 전반을 SEO 검색엔진최적화, 퍼포먼스 마케팅과 하나의 사이클로 묶어 운영한다. 기획과 UX/UI 디자인에서 출발해 검색 유입 구조를 세우고, 전환 데이터를 근거로 다음 개선을 결정하는 방식이다. 브랜드의 얼굴이 될 홈페이지 제작을 고민하고 있다면 아래에서 협업을 시작할 수 있다.
마무리와 다음 스텝
towards는 타이포그래피 하나로 첫인상을 세우고, 프로세스 공개로 발주의 불안을 지우는 사이트다. 브랜드 선언과 상담 언어의 온도차, 3색 팔레트의 절제까지 웹디자인 스튜디오의 자기 증명으로서 완성도가 높다. 다음 스텝은 셋으로 요약된다. 프로젝트별 케이스스터디 페이지를 만들어 검색 면적을 넓힐 것, 웹폰트 서브셋과 프리로드로 LCP를 방어할 것, 그리고 6단계 프로세스 옆에 실제 고객의 한 줄 코멘트나 수치를 붙여 공개된 절차에 증거를 더할 것. 감각이 이미 증명된 사이트인 만큼, 남은 과제는 그 감각이 검색과 전환으로 이어지는 길을 닦는 일이다.