핵심 요약
이번 Red Bricks 프로젝트는 B2B 마케팅 기업 Red Bricks 의 사이트를 새롭게 구축한 작업입니다. 브랜드의 전문성과 성과를 효과적으로 전달하고 방문자의 신뢰를 빠르게 형성하는 구조 설계에 집중했습니다. 단순한 정보 나열이 아닌 전환까지 이어지는 UI/UX 흐름을 중심으로 제작되었습니다. 메인 비주얼은 Red Bricks의 브랜드 정체성과 전문성을 명확하게 전달하기 위한 메시지 중심의 히어로 섹션으로 설계되었습니다.
이번 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의 강점인 실행력과 성과 중심의 마케팅 역량이 사용자 경험 전반에 녹아들 수 있도록 구조화한 것이 이번 프로젝트의 핵심입니다.
홈페이지 제작을 고민 중이라면 잡오브브라더스에 편하게 물어보세요. 기획부터 개발까지 직접 하는 팀이 답합니다. 홈페이지 제작 문의 →
출처·근거
- 원문: 네이버 블로그 — 잡오브브라더스 (2026-04)
