JTB Americas | 기업 사이트 전면 리뉴얼

세계 최대급 JTB 그룹의 디지털 전환을 실현

글로벌 전개를 뒷받침하는 Webflow 리뉴얼 프로젝트

세계 최대급 여행사 JTB 그룹의 북미 거점, JTB Americas. Webharu는 이 회사의 기업 사이트 전면 리뉴얼을 담당했습니다. 문의를 계기로 프로젝트가 시작되어, 글로벌 거점으로서의 신뢰성·속도·확장성을 두루 갖춘 새로운 디지털 기반을 구축했습니다.

클라이언트가 안고 있던 과제

이전 웹사이트는 구축한 지 오래되어 시스템과 디자인이 시대에 맞지 않게 되어 있었습니다. 특히 WordPress로 구축된 구 사이트에서는 보안 업데이트 지연과 플러그인 의존에 따른 취약성이 드러나 안정적인 운영이 어려운 상황이었습니다. 또한 갱신 작업에 시간이 걸려 담당자가 적시에 정보를 알리지 못하는 과제도 있었습니다.

이러한 배경에서 보안과 운영 효율을 동시에 해결하기 위해 Webflow로의 이전을 결정했습니다. 노코드이면서도 높은 확장성과 안정적인 호스팅 환경을 갖춘 Webflow를 도입해 안전성과 관리성 양면에서 큰 개선을 실현했습니다.

Webharu의 해결 접근

전략적 접근

초기 단계에서 사이트맵 재설계부터 착수해 정보 구조를 근본적으로 정리했습니다. Figma를 활용한 공동 설계 프로세스를 채택해 클라이언트와 실시간으로 피드백을 주고받으며 UI/UX 방향성을 신속히 확립했습니다. 디자인과 요구사항 정의를 병행함으로써 짧은 기간에도 높은 완성도를 실현했습니다.

구현 단계에서는 Webflow를 사용해, 코드 없이도 세부까지 통제된 비주얼 품질을 확보했습니다. 편집 권한을 최적화해 운영팀이 스스로 갱신·개선할 수 있는 관리 체계를 구축했습니다. 모든 디바이스에서 통일감 있는 반응형 디자인을 구현해 모바일 중심 열람 환경에서도 쾌적한 사용자 경험을 제공합니다.

기술적 솔루션

Webflow의 경량 구조와 최신 호스팅 환경을 살려 페이지 로딩 속도를 2.8초까지 단축했습니다. 글로벌 CDN을 활용해 북미·일본·아시아 간 고속 전송을 실현했습니다. 다국어 전개를 내다본 CMS 설계로 영어·일본어·스페인어 등 여러 지역 운영에도 유연하게 대응할 수 있는 기반을 구축했습니다.

또한 콘텐츠 갱신 플로우를 자동화·단순화함으로써 기존의 “엔지니어 의존형 운영”에서 “마케팅 주도형 운영”으로 전환했습니다. 운영팀이 자립해 움직일 수 있는 구조를 정비해 속도와 품질을 함께 실현했습니다.

제작 범위

이번 프로젝트에서는 수주부터 납품, 공개 후 운영까지 Webharu 팀이 일관되게 대응했습니다.
요구사항 정의, 정보 설계, 디자인, 구현, 검증, 공개, 운영 설계를 모두 사내에서 완결해 외주에 의존하지 않는 높은 품질 통제를 실현했습니다.

1. 요구사항 정의·사전 상담

• 사업 내용·목적·타깃의 명확화
• 경쟁 사이트·업계 트렌드 분석
• 브랜드 톤, 비주얼 언어의 방향성 정리
• 필요 기능과 우선순위 정의
• KPI·성과 지표 설정(CV, 체류 시간, 갱신 빈도 등)

2. 정보 설계(IA / 사이트맵)

• 기존 사이트의 구조 분석과 정리
• 신규 사이트의 사이트맵 구축
• 정보 계층과 동선 설계의 재구축
• SEO·사용성(유저빌리티)을 고려한 구조 최적화
• 와이어플로(화면 전환도) 수립

3. 와이어프레임 설계(Figma)

• 주요 페이지의 레이아웃 설계
• 요소의 우선도·시선 유도 정리
• UI 컴포넌트 설계 정의
• 콘텐츠 볼륨에 따른 정보 밀도 조정
• 클라이언트 리뷰를 거듭한 애자일 설계

4. 디자인 제작(UI/UX)

• Figma에서의 비주얼 디자인 제작
• 타이포그래피·배색·여백의 통일 규칙 설계
• 브랜드 톤에 기반한 모듈 설계
• 모바일 퍼스트 UI 최적화
• 애니메이션과 마이크로 인터랙션 설계

5. Webflow 구현

• Webflow를 통한 구축
• 클래스 명명 규칙(BEM 기반) 기반 구조 관리
• CMS 컬렉션 설계와 템플릿 구축
• 애니메이션(Interactions)·동적 요소 구현
• Lottie·SVG 등 경량 애니메이션 최적화
• SEO 메타·OGP·구조화 데이터 구현

6. 반응형 대응

• 주요 3개 브레이크포인트(PC / Tablet / Mobile) 최적화
• 한자·가나·영문 비율을 고려한 줄바꿈 제어
• 이미지 비율·컴포넌트 가변 대응
• 탭 영역·접근성 확인

7. 도메인·서버·메일 기반

• Webflow 호스팅 연결
• A / CNAME / MX 레코드 설정
• SSL 인증서 발급·HTTPS 리다이렉트 설정
• 커스텀 도메인 메일의 신규 구축과 인증 설정(SPF/DKIM)
• Google Workspace 연동 지원

8. 테스트·검증

• 브라우저 테스트(Chrome / Safari / Edge / Firefox)
• 모바일 검증(iOS / Android)
• 링크·폼·애니메이션 동작 확인
• 페이지 속도 테스트(Lighthouse / GTmetrix)
• 구조화 데이터·SEO 체크

9. 공개·이전

• Webflow 공개 설정(DNS 반영 포함)
• 구 사이트로부터의 리다이렉트 설계
• 운영 담당자 대상 교육 실시

10. 유지보수·운영 지원

Webharu의 운영 유지보수 플랜에는 가입하지 않았지만, 정기적으로 스팟 대응으로 수정을 실시하고 있습니다.

클라이언트의 목소리

첫 제안부터 납품까지 매우 원활한 진행이었습니다. 특히 구 환경의 과제를 정확히 정리하면서 운영 면까지 고려한 제안을 받은 점이 인상적이었습니다. 글로벌 기업 특유의 다층적인 요건을 단순한 구조로 정리해, 누구나 관리하기 쉬운 구조로 재설계해 주었습니다.

납품 후에도 개선 제안과 기술 면의 지원을 계속해 주고 있어, 장기적인 파트너로서 안심하고 운영하고 있습니다.

Webharu가 공들인 부분

글로벌 규모의 기업 사이트에서는 지역·언어·문화의 차이를 넘어 일관된 브랜드 경험을 유지하는 것이 요구됩니다. Webharu는 Webflow의 유연한 CMS 구조와 호스팅 환경을 최대한 활용해 복잡한 정보 설계를 직관적이면서 확장 가능한 형태로 재구축했습니다.

다국어 대응을 전제로 한 CMS 설계를 통해 각 거점의 운영 부담을 최소화하면서 통일된 브랜드 톤을 유지할 수 있습니다. 나아가 공개 후에도 데이터 분석·UX 개선·SEO 강화를 지속적으로 지원해, 사이트를 “운영하면서 성장시키는” 구조를 만들었습니다.

단순한 납품이 아니라 비즈니스의 성장을 함께 뒷받침하는 동반형 파트너로서 장기적인 가치를 계속 제공합니다.

왜 Webharu에 의뢰해야 하는가

• 글로벌 기업의 복잡한 요건을 정리해 명확한 구조로 떨어뜨리는 설계력
• Webflow를 최대한 활용한 고품질·고속 구현력
• 운영을 멈추지 않기 위한 지원 체계와 개선 제안력

맺음말

Webharu는 세계에서 전개하는 기업이 “현지 시장에 최적화된 경험”을 신속하게 전할 수 있는 구조를 만듭니다.
그것이 Webharu의 글로벌 리디자인 프로젝트입니다.