템플릿 제작 보험업기업 사이트의료업

주식회사 코스모워크 | 템플릿=양산형이라는 고정관념을 뒤집다.

주식회사 코스모워크의 기업 사이트 제작. 템플릿을 커스터마이즈해 일본어에 최적화했습니다. Webflow로 효율적이면서도 높은 품질의 사이트를 실현했습니다.

공개 중인 사이트 보기
주식회사 코스모워크 웹사이트
Client
주식회사 코스모워크
Industry
의료업
Type
템플릿 제작
Platform
Webflow
Project

템플릿을 소재로 승화시키다. 일본어의 아름다움으로 브랜드 가치를 재구축

템플릿=양산형이라는 고정관념을 뒤집었습니다. 이 프로젝트에서는 영어권 디자인을 일본어 타이포그래피의 맥락에서 재구축해, 짧은 납기와 낮은 비용에도 브랜드의 숨결이 느껴지는 사이트를 실현했습니다.

결과적으로 템플릿 커스터마이즈의 영역을 넘어선 재디자인을 완성했습니다.

배경

해외 템플릿을 그대로 사용하면 아름답게 보여도 일본어가 겉돕니다. 자간의 답답함, 줄바꿈의 어긋남, 여백 리듬의 흐트러짐이 신뢰감을 떨어뜨리는 요인이 되고 있었습니다.

여기에 클라이언트로부터 리브랜딩 시기에 어울리는 톤을 확립하고 싶다는 요청도 있어, Webharu의 템플릿 플랜을 제안했습니다.

Webharu 템플릿 플랜의 진행 순서

Webharu는 한정된 납기와 비용 안에서도 높은 품질을 담보하기 위해
명확한 단계를 밟아 템플릿 제작을 진행합니다.

1. 사전 상담·킥오프(수주 확정)

먼저 클라이언트의 사업 배경·목적·이상적인 인상을 꼼꼼히 청취합니다.
Webharu는 단순한 디자인 취향이 아니라 “누구에게·무엇을·어떻게 전할 것인가”를 명확히 해 브랜드 톤의 방향을 정합니다.

2. 템플릿 선정·구성 설계

클라이언트가 희망한 템플릿을 베이스로 구성 요소를 재설계합니다.
기존 템플릿을 그대로 쓰는 것이 아니라 “구조를 빌려 재구축한다”는 사고방식으로 진행합니다. 템플릿 구매 수배도 Webharu가 대행했습니다.

3. 디자인 커스터마이즈·일본어 최적화

영어권 디자인의 여백감과 그리드 비율을 바탕으로, 일본어 폰트에 맞는 자간·행간·줄바꿈을 재설계합니다.

신규 디자인 부분은 Figma에서 확인하면서 구현과 디자인 수정을 동시에 진행합니다. 브랜드 컬러와 제목 계층도 일본어 맥락에 맞춰 조정했습니다.

4. Webflow 구현·반응형 조정

디자인 조정과 병행해 Webflow에서 구현을 진행하고, PC·태블릿·스마트폰 모두에서 아름답게 표시되도록 최적화했습니다.

구축과 디자인을 동시에 진행함으로써 통상보다 짧은 일정에서도 품질을 떨어뜨리지 않고 마무리했습니다.

5. 공개·운영 지원

공개 후에는 액세스 분석(GA4·GTM)과 SEO 메타 정보 최적화를 지원합니다. 필요에 따라 지속적인 유지보수·갱신 운영도 가능한 체계를 갖추고 있습니다.

Webharu의 접근 방식

단순한 수정이 아니라 템플릿을 “재설계의 토대”로 다루었습니다. 레이아웃 구조·여백 이론·폰트 계층을 제로 베이스로 재검토하고, 일본어가 가장 아름답게 읽히는 맥락을 전제로 구축했습니다.

퍼스트뷰(FV)는 완전 오리지널로 재디자인했습니다. 영어 템플릿의 그리드 구조를 해체하고 일본어에 최적인 시선 동선을 재구축했습니다.

주요 커스터마이즈

Typography Reengineering

일본어 폰트 특유의 비례를 고려해 행간·자간·줄바꿈을 재정의했습니다. 시선의 흐름이 자연스럽게 정보 계층으로 유도되는 구조를 실현했습니다.

FV 리디자인

브랜드의 핵심 메시지를 한 줄로 전하는 카피 구조로 만들었습니다. 히어로 섹션의 비율과 CTA 배치도 모두 재구축했습니다.

Color Grammar 설계

브랜드 컬러를 주축에 두고 톤의 계조를 정리했습니다. 명도로 차이를 만들고 채도로 시선을 끄는 배색 이론을 도입했습니다.

반응형 디렉션

한자·가나·구문 비율에 따라 줄바꿈을 최적화했습니다. 디바이스 폭에 따라 무너지지 않는 자연스러운 문장 구조를 유지합니다.

Micro Interaction Design

고요함 속의 품격 있는 움직임을 의식했습니다. 속도와 질감을 양립시키는 0.3초 트랜지션 설계를 채용했습니다.

제작 범위

Webflow 구현/템플릿 재설계/Figma 디자인/브랜드 톤 디렉션

중점을 둔 부분

템플릿은 단순한 틀이 아니라 소재입니다. 디자인의 의도를 읽어내고 일본어 문화의 호흡을 불어넣으면 템플릿을 넘어선 재구축형 디자인을 실현할 수 있습니다.

Webharu는 비용 최적화와 아름다움의 재정의를 양립시키는 설계 사상을 철저히 지킵니다.

맺음말

구조를 이해하고 미의식으로 재구축한다.
그것이 Webharu의 템플릿 리디자인입니다.

당신의 사이트도, 같은 방식으로.

먼저 현재 상황을 들려주세요.

제작만, 운영만, 도중부터 운영만 — 어느 쪽이든 가능합니다.