User Interface Design

LOTTE JTB 웹사이트 리디자인 작업

by 진간장

Apr 7. 2025

안녕하세요, 제가 LOTTE JTB 웹사이트를 사용하면서 불편한 점을 보완하는 형식의 리디자인을 한번 해보았는데요. 오늘은 그 과정을 맘껏- 공유해 드리려고 해요.

✍️ 프로젝트 개요

Lotte JTB는 롯데의 인프라와 일본 최대 여행사 JTB의 글로벌 네트워크를 바탕으로 한 종합 여행 브랜드입니다.

하지만 웹사이트는 첫 진입부터 시각적인 복잡함과 정보 과다로 인해,

사용자들이 원하는 정보를 빠르게 찾기 어려운 구조를 갖고 있었어요.

LOGO_%EA%B0%90%EB%8F%99%EC%9D%98%EA%B3%81%EC%97%90%EC%96%B8%EC%A0%9C%EB%82%98.jpg?type=w773

Lotte JTB is a travel brand that provides Lotte's infrastructure and JTB's global network.

롯데제이티비 웹사이트는 다양한 여행 상품들을 보여주기 때문에 복잡하다는 느낌을 받을 수도 있다고 생각했어요. . . 웹사이트를 처음 들어간 유저가 보는 첫 화면을 간결성 가이드라인에 따라 평가해보았는데요. 여행 브랜드라는 특성상 다양한 상품과 콘텐츠를 담아야 하는 구조이기에 정보량은 많고, 구조는 복잡한 웹사이트였어요. 하지만 그럴수록 더더욱 사용자 친화적인 탐색 경험이 필요하다고 생각했습니다.

또한, 원하는 메뉴를 찾기 위해 여러 번 검색해야 하는 불편함이 있었습니다. 여러 번 스크롤해야 하는 비효율적인 탐색 방식으로 인해 리디자인의 필요성을 느꼈습니다...!

✅리디자인 목적

정보의 구조화 및 축약✅

시각적 일관성과 사용성 개선✅

시선 유도 설계와 인터랙션의 직관성 향상✅

Progressive Disclosure (점진적 정보 노출) 적용✅

기존 웹사이트 문제 분석

사각형과 원형이 혼재

❌ Bad 01. 불규칙한 시각 요소 구성

콘텐츠마다 형태, 크기, 정렬 방식이 제각각이었어요.

'크루즈', '호텔', '투어/티켓' 섹션 이미지가 사각형, 원형이 혼재되어 있어 시각적 통일감이 없었습니다. 이는 시선 분산을 유발해 사용자로 하여금 핵심 콘텐츠를 찾는 데 더 많은 노력을 요구하게 만들었습니다.

또한 Grouping이 이루어지지 않아 정보 블록들 간의 연관성이 약해보였고, 정보 간 위계를 파악하기 어려웠습니다. 페이지 내에서 반복적인 시선 이동을 하게 만들며 인지적 피로도를 높였습니다.

❌ Bad 02. 과도한 정보 제공

광고성 문구들이 정보 전달보다 마케팅에 치우친 느낌

한 화면에 지나치게 많은 텍스트와 이미지가 나열되어 있었는데요. 상품 하나에 붙은 설명이 너무 장황해서, 날짜, 출발지/도착지 등 오히려 중요한 정보가 묻히고 말았어요.

Choice Paralysis를 유발하며, 사용자가 중요한 정보를 놓치게 만들 수 있습니다. 사용자는 “무엇부터 봐야 할지” 혼란을 느끼고, 이탈 확률이 높아집니다

'★롯데홈쇼핑/NO옵션/럭셔리★' 같은 광고성 문구들이 정보 전달보다 마케팅에 치우쳐 있어, 불필요한 강조 표현은 오히려 콘텐츠를 복잡하게 만들어 신뢰감을 저하시키며 사용자 경험을 해쳤습니다.

‘여행 상담 시간 – 평일 09:00~17:00, 주말 휴무’라는 문장이 세 번 이상 반복

❌ Bad 03. 중복 정보의 반복 노출

‘여행 상담 시간 – 평일 09:00~17:00, 주말 휴무’라는 문장이 세 번 이상 반복되어 불필요하게 스크롤을 유도하고, 콘텐츠의 간결함을 떨어뜨렸어요.

❌ Bad 04. 유사한 콘텐츠의 분산 배치

'지금 떠나기 딱 좋은 여행지'와 '특별한 여행지를 찾으신다면'은 유사한 성격을 지닌 콘텐츠였음에도 불구하고 별개의 영역에 분리되어 노출

'지금 떠나기 딱 좋은 여행지'와 '특별한 여행지를 찾으신다면'은 유사한 성격을 지닌 콘텐츠였음에도 불구하고 별개의 영역에 분리되어 노출되어 있었어요. 유사한 구조임에도 분리 노출되어 있어 탐색 동선이 비효율적이었습니다.

이는 결국 사용자의 탐색 시간을 증가시키고, Conversion Rate을 낮추는 요인이 됩니다.

슬라이드 구조로 통합하면 탐색 흐름이 자연스러워졌을 텐데 아쉬웠던 부분입니다.

�리디자인 방향 & 개선 사항

✅ Good 01. 상단 인터페이스 정리

불필요한 일러스트레이션을 제거하고, 메뉴 구조를 심플하게 정렬해 사용자에게 명확한 시각적 정보를 제공할 수 있도록 구성했습니다.

✅ Good 02. 일관된 메뉴 아이콘 디자인

크기, 형태, 위치가 제각각이었던 메뉴 아이콘을 동일한 규격의 원형 아이콘으로 통일해, 콘텐츠 카테고리를 쉽게 인지할 수 있도록 했습니다. 사용자가 콘텐츠 간의 관계를 빠르게 파악하고, 인지적 부담 없이 탐색할 수 있도록 도왔습니다.

✅ Good 03. 상단 배너 구성

할인 프로모션과 인기 여행지 정보를 담은 가로형 배너를 상단에 배치해 사용자에게 빠르게 주요 정보를 전달하고, 행동 유도를 강화했습니다. (중복되는 요소들은 제거)

✅ Good 04. 유사 콘텐츠 통합 & 슬라이드 구성

'지금 떠나기 좋은 여행지'와 '특별한 여행지' 같은 유사한 콘텐츠를 하나의 슬라이드로 통합해 정보의 중복을 줄이고, 시각적 집중도를 높였습니다.-> 탐색 효율을 향상

✅ Good 05. 스크롤 최소화 설계

안내 아이콘을 원형으로 통일하고, 사이즈를 축소해 페이지 내 스크롤 범위를 줄이고, 모바일 환경에서도 쾌적하게 탐색할 수 있도록 했습니다.

✅ Good 06. 정보 중복 제거

반복되던 ‘상담 시간’ 문구는 한 번만 명시하고 축약해 효율적으로 전달하도록 구성했습니다.

✅ Good 07. 점진적 정보 노출 적용 - 기능 레버리지

기본 뷰에서는 핵심 정보만 노출하고, 필요한 경우에만 세부 항목이 펼쳐지도록 설계하여 정보 과부하를 방지하고, 사용자의 탐색 흐름을 유연하게 설계했습니다.

한 디자인 구조 안에서 여러 콘텐츠가 돌아가듯 보여지는 방식은 디자인 Leverage로 작용하여 공간 절약과 콘텐츠 집중 두 마리 토끼를 모두 잡을 수 있겠죠...

� Design Review

기존 화면 분석

과잉 정보와 비일관성의 문제

기존 LOTTE JTB 웹사이트는 다양한 여행 상품을 한눈에 보여주기 위한 의도는 있었지만, 콘텐츠 간 위계가 명확하지 않고, 시각 요소가 일관되지 않아 오히려 사용자의 인지 부담을 가중시키는 구조였습니다.

1. 시각 요소의 불일치로 인한 혼란

콘텐츠 카드마다 형태(원형/사각형), 색상, 정렬 방식이 제각각이었습니다. 동일한 목적의 콘텐츠임에도 불구하고 시각적인 스타일이 통일되어 있지 않아 사용자의 시선이 분산되고, 어떤 요소가 더 중요한지 파악하기 어려운 상태였습니다.

콘텐츠 배치가 중앙 정렬과 좌측 정렬이 혼용되어 있어, 사용자 뇌는 ‘무엇이 묶여 있고’, ‘어디서부터 읽어야 하는가’를 판단하는 데 더 많은 에너지를 사용해야 했습니다. 이는 perceptual grouping이 이루어지지 않는 대표적인 사례입니다.

2. 정보의 과잉 노출로 인한 인지 부하

상품마다 제목, 설명, 태그, 아이콘 등 너무 많은 정보를 한 번에 노출시켜, 사용자는 오히려 핵심 정보를 찾기 어려워졌습니다. 예를 들어, "★롯데홈쇼핑/NO옵션/럭셔리★" 등은 실제 구매 결정에 도움이 되는 정보보다는 광고적이고 불필요한 요소로 작용했고 핵심인 "목적지", "일정" 같은 정보는 시각적으로 묻히는 문제가 있었습니다.

이는 UX 원칙 중 하나인 정보 계층 구조 설계가 제대로 지켜지지 않은 것으로, 콘텐츠가 '읽히는' 것이 아니라 '넘어가는' 구조로 되어버리는 결과를 초래했습니다.

3. 중복 요소의 반복으로 인한 피로도 증가

‘여행 상담 운영 시간’이 페이지 내에서 3회 이상 반복 노출되고 있었습니다. 사용자의 정보 인지를 돕기보다 스크롤을 유도하는 불필요한 방해 요소로 기능하고 있었고, 콘텐츠의 간결성과 집중력을 떨어뜨렸습니다.

특히 모바일 환경에서 이러한 반복은 탐색 효율성을 현저히 떨어뜨리는 UX 오류로 이어질 수 있습니다.

4. 비슷한 유형의 콘텐츠 간 분리 배치

'지금 떠나기 딱 좋은 여행지'와 '특별한 여행지를 찾으신다면'은 콘텐츠 성격상 매우 유사하지만, 배치 방식이 달라서 유저는 유사한 목적을 위해 두 섹션을 개별적으로 인식하고 해석해야 하는 부담을 안게 됩니다.

이는 콘텐츠를 목적 기반으로 묶고, 탐색 흐름에 따라 슬라이드 구조 등으로 연결 지었을 때 더 효과적인 사용자 경험을 제공할 수 있음을 시사합니다.

개선 화면 분석

정보 구조화와 시선 유도를 중심으로 한 설계

리디자인 화면은 기존 문제를 체계적으로 해결하며, 사용자가 콘텐츠를 더 빠르게 인지하고 행동으로 이어질 수 있도록 여러 가지 UX/UI 전략을 적용했습니다.

1. 콘텐츠 통일성과 시각 패턴화

시각적 통일성을 위해 카드 형태, 이미지 비율, 아이콘 형태를 원형으로 통일했습니다. 이는 지각적 consistency을 강화하고, 유저가 콘텐츠 흐름을 따라가기 쉬운 시각적 리듬을 제공합니다.

특히 원형 아이콘은 메뉴와 하단 안내 요소에서도 반복 사용되며, 시각적 패턴을 통해 사용자가 무의식적으로 기능을 예측할 수 있도록 구성했습니다. 이는 사용성 향상을 위한 Affordance 디자인의 사례로 볼 수 있습니다.

2. 정보의 우선순위 설계 및 점진적 노출

모든 정보를 한 번에 보여주는 대신, 핵심 정보(여행지, 가격, 출발일 등)만 1차 노출하고, 필요 시 더보기 또는 클릭을 통해 세부사항이 노출되도록 했습니다.

이러한 방식은 Progressive Disclosure (점진적 정보 공개) 원칙에 따라 정보 과부하를 줄이고, 유저의 행동 맥락에 맞춘 탐색 흐름을 유도합니다.

예: 초기 뷰에는 ‘유럽 패키지 여행 – 179만원~’만 보여주고, 상세 옵션, 할인 조건, 후기 등은 상세 페이지에서 점진적으로 공개.

3. 그룹화 및 정렬 방식 통일

시각 요소를 좌측 정렬로 통일하고, 콘텐츠 간 그룹 간격과 패딩 값을 일정하게 유지해 시선을 안정적으로 유도할 수 있도록 했습니다.

이는 특히 모바일 환경에서 세로 스크롤 탐색 시 시선의 흐름이 매끄럽게 이어지는 장점이 있으며, 콘텐츠 간 관계성도 자연스럽게 인지됩니다.

4. 불필요한 반복 제거 및 압축

반복되던 상담 시간 정보는 화면 하단 혹은 툴팁으로 압축하여 한 번만 노출되도록 설계했습니다. 사용자의 인지 리소스를 절약하면서도 필수 정보는 놓치지 않도록 하는 정보 압축 전략이 적용되었습니다.

5. 레버리지 포인트 생성

유사한 콘텐츠를 슬라이드로 결합함으로써, 하나의 UI 요소가 여러 콘텐츠를 대표하도록 설계하였습니다.

인터페이스가 단순해지고 정보 탐색은 쉬워졌습니다.

이번 리디자인은 단순한 디자인 개편이 아니라, 사용자의 행동 흐름, 시선 동선, 정보 처리 속도까지 고려한 사용자 중심의 구조화 전략이 중심이었습니다.

복잡한 여행 정보를 어떻게 ‘선택 가능한 구조’로 단순화할 수 있을지,

다양한 콘텐츠를 어떤 방식으로 ‘연결’해 사용자 피로도를 줄일 수 있을지,

이러한 고민을 바탕으로 ‘시각적 질서’를 회복하고, ‘행동 유도’가 가능한 디자인으로 개선하는 데 집중했습니다.

경험은 더 풍부해진 웹사이트.

이것이 이번 리디자인이 말하고자 한 핵심 가치입니다.

이번 리디자인은 시각적 개선을 통해 사용자 경험 전반의 흐름과 니즈를 반영한 실험이었어요.

그냥 ‘예쁘게’가 아니라, 사용자에게 "직관적이고 친절한 웹사이트란 무엇인가?"에 대해 끊임없이 고민한 시간이었습니다.

여행은 설레고, 가슴 뛰는 일이기에, 웹사이트 경험조차도 그 감정을 해치지 않도록

간결하고 효율적인 정보 구조와 사용성을 제공하는 디자인이 무엇보다 중요하다고 생각합니다 :)

읽어주셔서 감사합니다.

다음엔 더 흥미로운 디자인 이야기로 찾아올게요!

소이소스 간장이었습니다 �

#디자인 #웹사이트 #롯데제이티비 #lottejtb #대학생 #디자이너 #UI #유아이 #UIUX #리디자인 #인터페이스 #작업 #기록

keyword

진간장 소속 이화여자대학교 직업 크리에이터

디자인에 대한 이야기를 합니다.

구독자

작가의 이전글그리스 로마 신화 속 세계를 그대로여행 예약 A to Z : 요즘 대학생의 여행 트렌드작가의 다음글