전체 글 196개의 글

경남캐노피는 주차장 캐노피, 흡연부스, 자전거 보관대 등 다양한 시설물을 제작·설치하는 기업으로제품 중심의 정보 전달과 실제 설치 사례를 통한 신뢰 확보가 중요한 산업 특성을 가지고 있습니다.

기존 기업형 홈페이지 구조에서 벗어나 사용자가 원하는 정보를 빠르게 찾을 수 있도록 제품 중심의 정보 구조와 설치사례 중심 UX 흐름을 재설계하는 데 초점을 두었습니다.

메인 페이지

메인 페이지 기획의도

- 제품군이 다양한 만큼 정보 구조를 단순하고 직관적으로 재정리

- 텍스트보다 이미지 중심의 전달 구조 강화

- 설치 사례를 활용한 신뢰 기반 UX 설계

실제 설치 이미지를 전면에 배치해 서비스 이해도를 즉각 높이는 직관형 메인 비주얼 UX 설계

메인 페이지는 슬라이드 구조를 기반으로 구성하여 각 슬라이드마다 캐노피, 흡연부스 등 제품별 실제 적용 환경 이미지를 배경으로 활용함으로써 사용자가 다양한 제품군을 자연스럽게 탐색할 수 있도록 설계했습니다.

넓은 구조와 안정적인 설계가 강조된 이미지를 통해 단순 제품이 아닌 공간을 개선하는 솔루션이라는 인식을 자연스럽게 유도하며 사용자가 별도의 설명 없이도 서비스의 성격을 이해할 수 있도록 설계했습니다.

또한 주변 환경과 조화를 이루는 장면을 통해 기능성과 함께 디자인 완성도까지 전달하는 UI로 구성했습니다.

단일 비주얼에 의존하는 방식이 아닌 제품별 활용 사례를 순차적으로 노출함으로써 서비스 범위와 적용 가능성을 직관적으로 이해할 수 있는 구조로 구성했습니다.

또한 화면 좌측에는 고정형 내비게이션을 배치하여사용자가 원하는 섹션으로 즉시 이동할 수 있도록 설계함으로싸 스크롤 기반 탐색의 불편함을 줄이고 페이지 내 이동 효율성과 사용성을 동시에 개선했습니다.

서브 페이지

카테고리·검색·리스트를 결합해 원하는 제품을 빠르게 탐색하는 제품 검색 UX 설계

해당 섹션은 다양한 캐노피 제품을 효율적으로 탐색할 수 있도록 카테고리 분류, 검색 기능, 리스트 UI를 결합한 구조로 설계되었습니다.

상단에는 제품군 및 용도에 따른 카테고리를 배치하여 사용자가 원하는 제품 범위를 빠르게 좁힐 수 있도록 구성했으며 검색 기능을 함께 제공해 특정 제품을 직접 탐색할 수 있도록 했습니다.

제품 리스트는 이미지 중심 카드 형태로 구성하여 형태와 구조를 직관적으로 비교할 수 있도록 설계하였으며 규격, 재질 등 주요 정보는 한눈에 확인 가능하도록 정리했습니다.

또한 반복되는 리스트 구조를 일관된 UI 패턴으로 구성함으로써 사용자는 별도의 학습 없이도 빠르게 제품을 비교·탐색할 수 있으며 결과적으로 제품 선택까지의 시간을 단축시키는 UX를 구현했습니다.

카테고리 기반 필터와 사례 리스트를 결합해 신뢰 형성과 비교 탐색을 동시에 유도하는 사례 중심 UX 설계

해당 섹션은 실제 설치 사례를 기반으로 사용자가 제품 적용 결과를 직접 확인할 수 있도록 구성된 영역입니다.

상단에는 제품군 및 설치 환경에 따른 카테고리 필터를 배치하여 사용자가 관심 있는 사례를 빠르게 선별할 수 있도록 설계했으며 검색 기능을 함께 제공해 특정 사례 탐색도 가능하도록 구성했습니다.

사례 리스트는 이미지 중심 카드 UI로 구성되어 각 프로젝트의 규모와 적용 형태를 직관적으로 비교할 수 있으며 텍스트보다 시각 정보를 우선적으로 전달함으로써 이해도를 높였습니다.

---

경남캐노피 웹사이트는 제품 이해부터 설치 사례 확인, 상담으로 이어지는 흐름을 고려해 설계된 프로젝트입니다.

제품과 사례를 중심으로 한 정보 구조,직관적인 탐색이 가능한 UI 구성 등을 통해 사용자가 필요한 저오를 빠르게 찾고 자연스럽게 다음 단계로 이동할 수 있도록 구현했습니다.

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →

산업 분야의 웹사이트는 단순한 정보 전달을 넘어 기술의 가치와 도입효과를 직관적으로 설득하는 구조가 핵심입니다.

이번 엔알텍 프로젝트는 원적외선 도장건조 솔루션이라는 전문적인 기술을 누구나 이해할 수 있도록 풀어내면서도 에너지 절감, 건조시간 단축, 탄소 저감이라는 핵심 성과를 전면에 배치한 성과 중심 랜딩페이지로 설계한 프로젝트입니다.

메인 페이지

메인 페이지 기획의도 - 원적외선 도장 건조 기술의 복잡한 원리를 비교 중심 구조(열풍 vs 원적외선)로 직관적으로 이해할 수 있도록 설계.- 에너지 절감, 건조 시간 단축, 탄소 저감 등 핵심 성과를 수치와 시각 요소로 강조하여 도입 판단을 빠르게 할 수 있도록 설계.

비교와 수치 중심 UI로 도입 효과를 직관적으로 설득하는 UX 설계

좌우 분할 레이아웃을 활용해 기존 열풍 방식과 원적외선 방식을 명확하게 대비시키고, 사용자가 별도의 해석 없이도 차이를 즉시 인지할 수 있도록 비교 중심 UI로 구성했습니다.

또한 비용 절감과 CO₂ 저감 효과를 카드형 컴포넌트와 강조 컬러로 시각화하여 핵심 성과가 자연스럽게 시선 흐름을 따라 인지되도록 UX를 설계했습니다.

특히 절감 금액과 퍼센트를 하단에 강조 배치함으로써 사용자가 ‘기술 이해 → 효과 인지 → 도입 판단’까지 이어지는 정보 구조를 경험 할 수 있도록 구현했습니다.

원리부터 결과까지, 한눈에 이해되는 건조 방식의 차이

열풍 대류 방식과 원적외선 복사파 방식의 차이를 직관적으로 비교하여 사용자가 기술적 개념을 별도의 설명 없이도 이해할 수 있도록 설계했습니다.

특히 ‘공기 가열’과 ‘복사열 침투’의 차이를 아이콘과 흐름 다이어그램으로 시각화 하여 복잡한 원리를 단계적으로 인지할 수 있는 UX 구조를 구현했습니다.

또한 원적외선이 도료 내부까지 침투하는 과정을 순차적으로 보여주며 기술의 작동 원리를 시각적으로 풀어내고 이후 건조 시간 단축과 에너지 비용 절감, ROI 데이터를 하단에 배치하여 이해에서 설득까지 자연스럽게 이어지는 정보 흐름을 완성했습니다.

결과적으로 사용자는 ‘기술 이해 → 작동 원리 인지 → 성과 체감’의 과정을 한 번의 스크롤 내에서 경험하며 도입 필요성을 빠르게 판단할 수 있도록 UX를 설계했습니다.

영상 중심 인터페이스로 기술 신뢰를 강화하는 UX 설계

제품 설명 중심이 아닌, 실제 제조 현장에서의 적용 사례와 고객 인터뷰 영상을 통해 기술의 효과를 보다 현실감 있게 전달할 수 있도록 구성했습니다.

사용자는 영상 콘텐츠 를 통해 도입 이후의 변화와 성과를 간접적으로 체험하며 텍스트보다 직관적인 방식으로 기술의 신뢰성과 활용 가능성을 인지할 수 있습니다.

---

이번 NRTEC 프로젝트는 단순한 기술 소개를 넘어 복잡한 산업 솔루션을 비교·수치·사례 중심의 UX 구조로 재해석하여 도입 효과를 직관적으로 설득하는 랜딩페이지 로 구축한 사례입니다.

사용자가 별도의 이해 과정 없이도 기술의 원리와 성과를 자연스럽게 인지하고 최종적으로 상담 및 도입 판단까지 이어질 수 있도록 전환 중심의 정보 구조를 설계했습니다.

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →

이번 Red Bricks 프로젝트는 B2B 마케팅 기업 Red Bricks 의 사이트를 새롭게 구축한 작업입니다.

브랜드의 전문성과 성과를 효과적으로 전달하고 방문자의 신뢰를 빠르게 형성하는 구조 설계에 집중했습니다.

단순한 정보 나열이 아닌 전환까지 이어지는 UI/UX 흐름을 중심으로 제작되었습니다.

메인 페이지

메인 페이지 기획의도 - 브랜드 전문성과 성과를 직관적으로 전달하고 신뢰 형성부터 문의 전환까지 자연스럽게 이어지는 UI/UX 흐름으로 설계.- 핵심 서비스와 포트폴리오를 단계적으로 배치하여 사용자가 정보를 빠르게 이해하고 판단할 수 있는 구조로 설계.- 데이터 기반 성과와 신뢰 요소를 시각적으로 강조하여 짧은 시간 안에 브랜드 경쟁력을 인지할 수 있도록 설계.

성과 중심의 브랜드 메시지를 직관적으로 전달하는 포지셔닝형 메인 비주얼 설계

메인 비주얼은 Red Bricks의 브랜드 정체성과 전문성을 명확하게 전달하기 위한 메시지 중심의 히어로 섹션으로 설계되었습니다.

‘분석은 정확하게, 실행은 정교하게’라는 핵심 문장을 전면에 배치하여 성과 중심의 마케팅 기업이라는 포지셔닝을 직관적으로 전달하고 사용자가 첫 화면에서 브랜드의 방향성과 강점을 빠르게 인지할 수 있도록 구성하였습니다.

불필요한 요소를 최소화하고 메시지에 집중할 수 있는 레이아웃을 적용하여 텍스트의 전달력을 극대화하였습니다.

우측에는 문의, 미디어, 인스타그램 등 주요 액션 요소를 플로팅 형태로 배치하여 사용자의 접근성을 높이고 콘텐츠 탐색 중에도 자연스럽게 상호작용이 가능하도록 설계하였습니다.

애니메이션을 통해 성과와 서비스 구조를 단계적으로 전달하는 인터랙션 설계

해당 섹션은 Red Bricks의 성과와 서비스 구조를 인터랙션을 통해 단계적으로 인지할 수 있도록 설계한 영역입니다.

성과 수치는 스크롤에 맞춰 숫자가 상승하는 애니메이션을 적용하여 사용자가 자연스럽게 수치에 집중하도록 유도하고 브랜드의 실적을 보다 직관적으로 체감할 수 있도록 구성하였습니다.

또한 우측의 원형 도형 요소는 순차적으로 등장하는 애니메이션을 통해 Service, Voucher, Portfolio로 이어지는 구조를 단계적으로 보여주며,

서비스 영역 간의 관계를 시각적으로 이해할 수 있도록 설계하였습니다.

이와 같은 인터랙션 요소를 활용하여 성과 데이터는 더욱 강조되고 서비스 구조는 보다 명확하게 인지되도록 제작하였습니다.

다양한 레퍼런스를 통해 성과를 직접 증명하는 포트폴리오 구성

해당 섹션은 Red Bricks의 다양한 프로젝트 수행 이력을 직관적으로 확인할 수 있도록 구성한 포트폴리오 영역입니다.

리빙, 패션, 금융, 전자, 공공기관 등 다양한 산업군의 사례를 한눈에 보여주어 특정 분야에 국한되지 않고 폭넓은 경험과 실행력을 보유한 브랜드임을 자연스럽게 전달할 수 있도록 설계하였습니다.

각 프로젝트는 카드 형태로 구성하여 사용자가 시각적으로 빠르게 콘텐츠를 탐색할 수 있도록 하였으며, 브랜드별 작업 결과를 이미지 중심으로 노출하여 성과를 직관적으로 인지할 수 있도록 구성하였습니다.

이를 통해 사용자는 Red Bricks의 실무 경험과 결과물을 직접 확인하며 브랜드에 대한 신뢰를 더욱 확고하게 형성할 수 있도록 설계되었습니다.

애니메이션으로 경험하는 실제 성과 포트폴리오

해당 섹션은 Red Bricks와 함께한 다양한 기업 및 브랜드 로고를 무한 스크롤 형태로 노출하여 레퍼런스의 규모와 신뢰도를 직관적으로 전달하는 영역입니다.

국내외 대기업부터 공공기관, 글로벌 브랜드까지 폭넓은 협업 사례를 지속적으로 보여줌으로써 단순한 경험이 아닌 ‘검증된 결과’를 기반으로 한 마케팅 파트너임을 강조하였습니다.

특히 로고가 끊임없이 흐르는 인피니트 애니메이션을 적용하여 다양한 브랜드와의 협업 경험이 지속적으로 이어지고 있다는 인상을 주며 사용자가 자연스럽게 신뢰를 형성할 수 있도록 설계하였습니다.

브랜드 철학을 직관적으로 전달하는 카드형 UX 설계

해당 섹션은 Red Bricks가 성과를 만들어내는 방식과 조직의 핵심 가치, 그리고 일하는 철학을 전달하는 영역입니다.

각 카드는 hover 인터랙션을 통해 자연스럽게 강조되며 사용자가 콘텐츠를 탐색하는 과정에서 브랜드의 가치와 문화를 능동적으로 경험할 수 있도록 구성하였습니다.

서브 페이지

레드브릭스 서브페이지는 단순히 메뉴별 정보를 분리해 나열하는 방식이 아니라 각 서비스, 브랜드 철학, 레퍼런스, 조직 구조를 서로 다른 목적의 콘텐츠 경험 으로 풀어내는 데 초점을 맞춰 설계한 프로젝트입니다.

마케팅 에이전시 사이트의 경우 보통 “무엇을 하는 회사인지”를 설명하는 데 그치는 경우가 많지만 이번 프로젝트에서는 한 단계 더 나아가 사용자가 레드브릭스를 어떤 흐름으로 이해하고 신뢰하게 될 것인가를 기준으로 서브페이지 구조를 설계했습니다.

또한 각 서비스 페이지는 동일한 톤앤매너를 유지하면서도 서비스별 핵심 메시지와 정보 배치 방식은 달리 적용 하여 각 카테고리의 성격이 보다 선명하게 드러나도록 설계했습니다.

회사소개 영역에서는 단순한 기업 정보 전달보다 레드브릭스가 어떤 방식으로 일하고, 어떤 팀 구조를 통해 결과를 만들어내는지를 보여주는 데 집중하여 브랜드 철학과 실무 역량이 분리되지 않고 연결되어 보이도록 설계했습니다.

포트폴리오 페이지에서는 성과와 협업 이력을 한눈에 인지할 수 있도록 시각적 밀도를 높이고 브랜드 사례를 빠르게 스캔할 수 있는 구조를 적용해 사용자가 직접 성과를 확인하며 신뢰를 형성할 수 있도록 구성했습니다.

서브페이지 전반은 단순한 정적 정보 구조가 아니라 스크롤 흐름, 카드형 UI, 반복되는 레이아웃 리듬, 인터랙션 요소 등을 통해 브랜드의 전문성을 더 입체적으로 체감할 수 있도록 설계했습니다.

각 페이지가 독립적으로 기능하면서도 전체적으로는 하나의 브랜드 경험으로 이어지도록 구조와 디자인 언어를 통일한 점 역시 이번 프로젝트의 중요한 포인트입니다.

---

레드브릭스 프로젝트는 단순한 웹사이트 제작을 넘어 브랜드의 성과와 신뢰를 사용자 경험으로 자연스럽게 전달하는 데 집중한 작업이었습니다.

사용자가 빠르게 정보를 이해하고 레퍼런스를 통해 신뢰를 형성하며 자연스럽게 문의로 이어질 수 있도록 전체 흐름을 설계하였습니다.

각 섹션은 인터랙션과 UI 요소를 통해 브랜드의 메시지를 직관적으로 전달할 수 있도록 설계하였습니다.

Red Bricks의 강점인 실행력과 성과 중심의 마케팅 역량이 사용자 경험 전반에 녹아들 수 있도록 구조화한 것이 이번 프로젝트의 핵심입니다.

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →

이번 프로젝트는 외식 브랜드 꼬댕 의 가맹 창업을 유도하기 위한 랜딩페이지 제작 프로젝트입니다.

단순한 브랜드 소개를 넘어 예비 창업자가 브랜드의 경쟁력과 수익 구조를 이해하고 창업 문의까지 이어질 수 있도록 설계하는 데 초점을 맞추었습니다.

메인 페이지

메인 페이지 기획의도

- 브랜드 매력과 사업성을 동시에 전달하는 구조 설계

- 창업 판단을 돕는 단계적 정보 흐름 구성

- 가맹 문의 전환을 고려한 랜딩 구조 설계

브랜드 경쟁력과 수익성을 동시에 강조하는 창업 유도형 메인 비주얼 설계

메인 비주얼은 꼬댕의 브랜드 이미지 전달을 넘어 예비 창업자의 관심을 즉각적으로 유도하기 위한 섹션 으로 설계되었습니다.

대한민국 NO.1 이자카야라는 메시지를 통해 브랜드 경쟁력을 직관적으로 강조하는 동시에 365일 안정적인 수익 구조를 전면에 내세워

창업 관점에서의 핵심 가치를 명확하게 전달하였습니다.

특히 감각적인 음식 비주얼과 브랜드 아이덴티티를 활용하여 사용자의 시선을 빠르게 집중시키고 짧은 시간 안에 브랜드에 대한 신뢰와 기대감을 형성할 수 있도록 구성하였습니다.

또한 우측에는 창업 상담 폼을 고정 배치 하여 사용자가 콘텐츠를 탐색하는 과정 중 언제든지 상담 신청으로 이어질 수 있도록 설계하였고 이를 통해 본 섹션은 단순한 첫 화면이 아닌 창업 관심을 실제 행동으로 전환시키는 핵심 역할을 수행하도록 했습니다.

브랜드가 아닌 ‘결과’를 직관적으로 전달하는 영상 기반 성과 강조 설계

해당 섹션은 꼬댕의 브랜드 매력을 강조하는 것을 넘어 실제 메뉴와 콘텐츠를 통해 성과를 직관적으로 전달하기 위한 영상 중심의 콘텐츠 영역 으로 설계되었습니다.

‘브랜드가 아닌 결과로 말한다’는 메시지를 중심으로 실제 메뉴 영상과 숏폼 콘텐츠를 배치하여 사용자가 단순한 설명이 아닌 실제 판매되는 모습과 반응을 직접 확인할 수 있도록 구성 하였습니다.

특히 외식 창업을 고려하는 사용자에게 중요한 요소인 메뉴 경쟁력’과 ‘현장 반응’을 영상으로 전달함으로써 텍스트나 이미지보다 더 강한 설득력을 확보할 수 있도록 설계하였습니다.

또한 모바일 친화적인 세로형 콘텐츠를 활용 하여 최근 소비 트렌드에 맞는 콘텐츠 경험을 제공하고 사용자가 자연스럽게 몰입할 수 있도록 구성하였습니다.

이를 통해 브랜드 소개를 넘어 실제 성과를 증명하고 예비 창업자가 ‘이 브랜드는 잘 된다’는 확신을 가질 수 있도록 만드는 핵심 설득 요소로 작용했하도록 설계했습니다.

핵심 수익 요소를 직관적으로 전달하는 그리드형 창업 경쟁력 구성

꼬댕 창업의 핵심 경쟁력을 짧고 강한 메시지로 전달하기 위해 그리드 형태 로 구성된 콘텐츠 영역입니다.

메뉴 경쟁력, 운영 효율, 원가 구조, 물류 시스템 등 창업자가 중요하게 고려하는 핵심 요소들을 각각의 블록으로 분리하여 배치함으로써 복잡한 정보를 빠르게 인지할 수 있도록 설계하였습니다.

특히 텍스트 중심 설명이 아닌 음식 비주얼, 매장 이미지, 물류 이미지 등 직관적인 시각 요소를 함께 활용하여 각 메시지의 설득력을 강화하였습니다.

또한 ‘대중적이지만 수익성 높은 메뉴’, ‘최소 인력으로 가능한 운영 구조’, ‘식자재 로스 최소화’, ‘안정적인 물류 공급’ 등 창업자의 핵심 관심사에 직접적으로 대응하는 메시지를 전면에 배치하여 단시간 내에 브랜드의 사업성을 이해할 수 있도록 구성하였습니다.

이를 통해 해당 섹션은 단순한 브랜드 장점 소개를 넘어, 예비 창업자가 ‘수익이 나는 구조인지’를 빠르게 판단할 수 있도록 돕는 핵심 설득 구간으로 기능합니다.

복잡한 수익 구조를 직관적으로 이해시키는 데이터 시각화 중심 UI/UX 설계

창업에 있어 가장 중요한 수익성과 비용 구조를 사용자가 빠르게 이해할 수 있도록 데이터 시각화 중심으로 설계 한 영역입니다.

예상 매출, 원가, 인건비, 임대료 등 다양한 수치 정보를 단순 나열이 아닌 표와 그래프 형태로 구조화 하여, 복잡한 정보를 한눈에 비교하고 인지할 수 있도록 UI를 구성하였습니다.

특히 수익표와 창업 비용표를 각각 분리하여 배치하고, 핵심 수치는 강조 컬러와 대비를 활용해 시각적으로 우선 인지될 수 있도록 설계함으로써

사용자가 중요한 정보에 빠르게 집중할 수 있도록 하였습니다.

원형 그래프와 수익 강조 영역을 활용하여 수익 비중과 투자 회수 구조를 직관적으로 이해할 수 있도록 구성함으로써 사용자가 복잡한 창업 데이터를 분석하는 것이 아니라 보는 것만으로 이해되는 경험을 할 수 있도록 유도하였으며 이를 통해 수익 정보를 효과적으로 전달하는 것을 넘어 사용자의 의사결정을 빠르게 돕는 UI/UX 설계 중심의 핵심 구간으로 구현되었습니다.

사용자의 창업 고민을 빠르게 해소하는 인터랙션 기반 FAQ UI 설계

창업을 고민하는 사용자가 느끼는 주요 궁금증과 불안 요소를 빠르게 해소하기 위해 설계된 인터랙션 중심 FAQ 영역입니다.

질문과 답변을 아코디언 형태로 구성 하여 한 번에 많은 정보를 노출하지 않고 사용자가 필요한 정보만 선택적으로 확인할 수 있도록 UX를 최적화하였습니다.

특히 수익, 비용, 대출, 운영, 지원 등 창업 결정에 직접적인 영향을 미치는 질문들을 우선적으로 배치하여 사용자의 실제 고민 흐름에 맞춘 정보 구조 를 설계하였습니다.

또한 클릭 시 즉시 답변이 펼쳐지는 인터랙션을 통해 정보 탐색 과정의 피로도를 줄이고 빠른 의사결정을 유도 할 수 있도록 구성하였으며 핵심 답변은 간결하게 전달하면서도

상세 내용은 상담으로 이어질 수 있도록 여지를 남겨 자연스럽게 전환으로 연결되는 흐름을 구축하였습니다.

사용자의 행동을 유도하는 이중 전환 구조의 상담 UI/UX 설계

마지막 창업문의 컨텐츠는 랜딩페이지의 최종 전환을 유도하기 위해 사용자의 행동을 직접적으로 이끌어내는 상담 유도 영역으로 설계되었습니다.

입력형 문의 폼과 즉시 연결 가능한 전화 상담을 함께 배치하여 사용자의 상황과 성향에 따라 선택할 수 있는 이중 전환 구조(UI) 를 적용하였습니다.

간편 문의 폼은 최소한의 입력 항목으로 구성하여 입력 부담을 줄이고 빠른 상담 신청이 가능하도록 UX를 최적화하였으며 필수 정보만 수집하는 구조를 통해 이탈을 최소화하였습니다.

동시에 전화 상담 영역을 강조하여 즉각적인 상담을 원하는 사용자에게는 별도의 탐색 없이 바로 행동할 수 있는 빠른 경로를 제공하였습니다.

---

지금까지 꼬댕 이자카야 창업 랜딩페이지를 살펴보며 UI/UX 관점에서 어떻게 사용자의 흐름을 설계하고 전환을 유도했는지 정리해보았습니다.

단순히 정보를 나열하는 것이 아니라 사용자의 고민 흐름에 맞춰 콘텐츠를 배치하고 직관적인 UI와 데이터 시각화를 통해 이해와 설득을 동시에 이끌어낸 점이 인상적인 프로젝트였습니다.

특히 수익 구조, 메뉴 구성, 운영 시스템까지 창업자가 가장 궁금해하는 핵심 요소를 명확하게 전달하는 구조가 잘 설계되어 있어 실제 전환까지 이어질 수 있는 랜딩페이지라고 생각됩니다.

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →

IOT 기반 창고관리 시스템 D-WMS 의 서비스 특성과 기술력을 효과적으로 전달하기 위해 랜딩페이지를 구축하였습니다.

기존의 복잡하고 이해하기 어려운 물류·창고관리 시스템을 누구나 직관적으로 이해할 수 있도록 콘텐츠 구조와 UI를 재설계하는 데 집중하였습니다.

특히 본 프로젝트에서는 B2B 솔루션 특성상 기능 중심의 정보 전달과 신뢰 확보가 동시에 이루어질 수 있도록 페이지 흐름을 전략적으로 설계하였습니다.

메인 페이지

메인페이지 기획의도

- 복잡한 시스템을 직관적으로 이해시키는 구조 중심 설계

- 기능 전달과 도입 고려를 동시에 유도하는 정보 구성

- B2B 신뢰 형성과 문의 전환을 고려한 흐름 설계

복잡한 위험물 관리 시스템을 한눈에 이해시키는 구조형 메인 비주얼 설계

해당 메인 비주얼은 단순한 이미지 영역이 아닌 D-WMS의 핵심 기능과 시스템 구조를 직관적으로 전달하기 위한 정보형 히어로 섹션 으로 설계되었습니다.

IoT, App, Web이 결합된 통합 관리 시스템의 특성을 고려하여 각 기능 요소를 개별적으로 나열하는 방식이 아닌 중앙 메시지를 중심으로 주요 기능들이 연결되는 구조 로 구성하였습니다.

이를 통해 사용자는 페이지 진입과 동시에 실시간 모니터링, 위험물 분류 관리, 클라우드 기반 접근, 장비 연동 및 사고 예방 등 핵심 기능을 한눈에 인지할 수 있도록 하였으며, 복잡하게 느껴질 수 있는 시스템을 “이해 가능한 구조”로 시각화하는 데 집중 하였습니다.

또한 다크톤 기반의 UI와 네온 포인트 그래픽을 활용하여 기술 기반 서비스의 전문성과 미래지향적인 이미지를 강조 하면서, 사용자의 시선을 자연스럽게 중앙 메시지와 기능 요소로 유도하도록 설계하였습니다.

해당 섹션에서 서비스의 핵심 가치를 짧은 시간 안에 효과적으로 전달하고 이후 콘텐츠에 대한 이해도를 높이는 출발점 역할을 수행하도록 제작하였습니다.

복잡한 위험물 관리 프로세스를 직관적인 흐름으로 풀어낸 시스템 구조 설계

D-WMS의 핵심 기능을 단순 나열하는 것이 아닌 위험물 관리 시스템이 실제로 어떻게 동작하는지를 이해할 수 있도록 프로세스 중심으로 구성한 구조 설명 영역입니다.

입고·출고 관리부터 적재 알고리즘, 피킹 처리까지의 흐름을 단계별로 시각화하여 사용자에게 시스템의 작동 원리를 직관적으로 전달하고, App과 IoT 기반으로 연동되는 관리 방식까지 함께 표현하였습니다.

또한 실제 물류 운영에서 중요한 관리 요소들을 카테고리별로 분리하여 정보 인지도를 높였으며 각 기능을 개별적으로 이해하는 것이 아니라 하나의 연결된 시스템으로 인식할 수 있도록 구조화하는 데 집중 하였습니다.

특히 텍스트 중심의 설명이 아닌 다이어그램과 UI 요소를 활용한 시각적 구성 으로 복잡한 시스템을 보다 쉽게 이해할 수 있도록 설계하였으며,

이를 통해 사용자는 서비스의 기능뿐만 아니라 운영 방식과 도입 시 활용 시나리오까지 자연스럽게 이해할 수 있도록 구성되었습니다.

슬라이드 인터랙션을 통해 서비스 흐름을 단계적으로 이해시키는 UI 구성

D-WMS는 시스템 중심의 서비스인만큼 단순한 기능 소개가 아닌 실제 작동 과정을 사용자에게 직관적으로 이해 시키는 것이 핵심 과제였습니다.

이를 이해 D-WMS의 주요 기능과 운영 흐름을 슬라이드 형태로 구성 하여 단계적으로 이해할 수 있도록 설계하였습니다.

재고관리, 출고관리, 로케이션 관리 등 핵심 기능을 개별 화면 단위로 나열한 것이 아니라, 사용 흐름에 맞춰 슬라이드를 순차적으로 확인할 수 있도록 구성함으로써 사용자가 자연스럽게 서비스 전체 프로세스를 따라갈 수 있도록 구상했습니다.

특히 PC와 모바일 화면을 함께 제공하여 디바이스별 사용 환경을 비교하며 이해할 수 있도록 했으며 슬라이드 전환을 통해 정보의 집중도를 높이고

복잡한 시스템도 부담 없이 인지할 수 있도록 했습니다.

이를 통해 서비스 기능을 보다 생동감 있게 전달하고 도입 이후의 실제 사용 모습을 구체적으로 상상할 수 있도록 유도했습니다.

도입 상담 전환을 고려한 정보 수집 중심의 컨택 폼 설계

D-WMS 도입을 고려하는 고객이 실질적인 상담으로 이어질 수 있도록 설계된 전환 중심 영역입니다.

단순한 문의 접수가 아닌 업체명, 업종, 유입 경로, 담당자 정보 등 상담에 필요한 핵심 정보를 사전에 수집할 수 있도록 구성하여 보다 효율적인 상담이 이루어질 수 있도록 설계하였습니다.

이를 통해 사용자는 간편하게 문의를 남길 수 있으며 기업은 보다 정확한 정보 기반으로 상담을 진행할 수 있는 효율적인 커뮤니케이션 환경을 구축하였습니다.

---

본 프로젝트는 단순한 제품 소개를 넘어 복잡한 물류·위험물 관리 시스템을 사용자 관점에서 이해할 수 있도록 재구성하고 실제 도입까지 이어질 수 있는 흐름을 설계하는 데 집중한 작업이었습니다.

메인 비주얼부터 기능 구조, 서비스 흐름, UI 기반 설명, 그리고 도입 문의까지 이어지는 전체 페이지를 하나의 흐름으로 연결하여 사용자가 자연스럽게 서비스를 이해하고 판단할 수 있도록 구성하였습니다.

D-WMS와 같은 B2B 시스템은 얼마나 많은 기능을 담고 있느냐보다 그 기능을 얼마나 명확하게 전달하고 신뢰를 형성하느냐가 중요한 만큼 정보 구조와 사용자 경험을 중심으로 설계를 진행하였습니다.

결과적으로 본 프로젝트는 복잡한 시스템을 ‘이해 가능한 서비스’로 전환하고 도입을 고려하는 고객에게 명확한 기준을 제시하는 전환 중심의 랜딩페이지 구축 사례입니다.

홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →