AIX 프로세스로 어디까지 구현할 수 있을까?
프로세스만으로 도달할 수 있는 수준을 보여주기 위해, 직접적인 디자인 작업은 의도적으로 하지 않았습니다. 지금의 화면은 그 실험이 도달한 결과입니다.
엠디자인 / AI X DESIGN / 15-STEP PROCESS · 비공식 리디자인
프롬프트로 만들고,
디자이너의 판단으로 발전시키다.
엠디자인의 AI X DESIGN 15단계를 따라, 디자이너가 화면을 직접 제작하지 않고 프롬프트만으로 기획부터 구현까지 진행한 실험입니다. 디자이너는 질문과 방향 선택, 결과 검토와 피드백을 맡았으며, 이 결과물은 그 과정의 가능성과 한계를 함께 보여줍니다.
이 프로젝트에서 디자이너가 한 일과 실험의 범위
제작을 맡겨도, 판단은 계속 필요했습니다.
과정 내내 디자이너가 결과를 살피고, 문제를 짚고, 방향을 선택하며 구체적인 수정을 지시했습니다. 무엇을 질문하고 어떤 결과를 선택할지 결정하는 디자이너의 안목과 역량이 결과의 수준을 좌우하는 중요한 요소였습니다.
직접 디자인하며 더 발전시켜야 합니다.
현재 결과에는 여전히 부족한 부분이 있습니다. 디자이너가 직접 참여해 레이아웃과 표현, 세부 요소를 수정하고 다듬는 과정을 더할 필요가 있습니다.
ORIGINAL → REDESIGN
기존 홈페이지와 리디자인 비교.
공식몰의 당시 메인 화면과 이번 리디자인의 첫 화면을 나란히 살펴보세요.
01 / ORIGINAL기존 사이트 · 배럴 공식몰
캠페인 배너에서 기획전과 상품 콘텐츠로 이어지는 공식몰 화면
02 / REDESIGN비공식 리디자인 · AI X DESIGN
수영복을 입은 인물 이미지와 브랜드 이야기로 이어지는 제안 화면
공식몰 화면은 2026년 10월 5일 기준입니다. 프로모션에 따라 현재 화면은 달라질 수 있습니다. 배럴 공식몰 보기 ↗
DESIGN NOTES
화면에서 달라진 점
시각적 초점
- 기존 화면
- 행사 메시지 중심의 첫 화면
- 제안 화면
- 수영복과 물의 이미지를 앞세운 첫 화면
이어지는 내용
- 기존 화면
- 기획전과 콘텐츠 목록으로 연결
- 제안 화면
- 브랜드 소개로 이어지는 구성
이 비교는 디자인 방향을 설명하며 사용성이나 성과의 우열을 입증하지 않습니다.
PROJECT OVERVIEW
프로젝트 한눈에 보기
01 / THE BRIEF브랜드 이미지와
브랜드 이미지와
상품 선택 정보를 함께.
새로운 디자인을 시도하면서 상품을 찾기 쉬운 홈페이지를 만들고자 했습니다. 수영복과 해변 생활에 필요한 제품을 함께 다룰 수 있는 배럴을 작업 대상으로 골랐습니다.
수영과 해변 생활을 함께 다룰 수 있다.
실내 수영복, 워터스포츠 의류, 키즈 제품과 액세서리를 다룹니다. 수영장과 해변 등 다양한 장면으로 제품을 소개할 수 있습니다.
브랜드 이미지와 상품 정보를 함께.
큰 사진으로 브랜드의 분위기를 보여주고, 상품 분류와 비교 정보로 필요한 제품을 찾게 합니다.
실제 자료로 구체화.
공식몰의 로고·상품·캠페인 자료를 바탕으로 제품 탐색을 구체화하고, 새로운 브랜드 장면은 콘셉트 이미지로 탐색했습니다.
디자인 목표
브랜드의 분위기를 보여주면서,
필요한 상품도 쉽게 찾게 할 수 있을까?
우리가 지켜야 했던 범위
프로모션 하나를 위한 마이크로사이트가 아닌, 여러 상품군과 고객 서비스를 연결하는 공식 쇼핑몰의 메인 페이지. 서브페이지 제작은 범위에 포함하지 않고, 이번 구현 화면에 필요한 탐색 구조를 설계했습니다.
02 / RESEARCH → INSIGHT
조사한 자료와 사용자 가설을 디자인에 반영했습니다.
브랜드와 제품 자료를 살피고, 시장·경쟁·사용자·디자인 관점에서는 설계 가설을 세웠습니다. 아래는 저장된 기획·에셋 자료와 작업 대화를 바탕으로 정리한 내용입니다.
브랜드 물에서 일상으로 이어지는 이미지
사용자 입문자와 정기 수영자의 차이
화면 감성과 제품 선택의 연결
조사 항목과 사용자 분석 자세히 보기
물에서 일상으로
수영과 워터스포츠를 연결하는 브랜드 맥락, 로고와 기존 캠페인의 표현을 확인했습니다.
설계에 반영실내 수영을 중심에 두고 해변·패션·일상의 장면으로 확장합니다.
제품을 고르는 기준
상품의 앞·뒤 사진, 컷과 백 형태, 관련 준비물 및 고객 서비스의 구성을 살폈습니다.
설계에 반영핏 비교, 준비물 카테고리, 배송·반품·매장 안내를 메인에 연결합니다.
운동과 취향의 접점
시장 규모를 분석한 결과가 아니라, 스포츠성과 라이프스타일을 함께 표현할 수 있다는 설계 가설입니다.
설계에 반영경기력 중심의 장면에 머무르지 않고, 패션 이미지와 패턴 컬렉션을 함께 보여줍니다.
상품 탐색과 브랜드 표현
특정 경쟁사를 평가하기보다, 쇼핑몰에 공통으로 필요한 탐색·카테고리·가이드와 브랜드 표현을 구분했습니다.
설계에 반영‘배럴만의 기능’이라는 주장보다, 물의 이미지를 활용하면서 상품을 찾기 쉬운 화면을 제안합니다.
시작과 루틴의 차이
입문자와 정기 수영자의 요구·불편·동기·장벽·탐색 행동·선택 기준을 나누었습니다.
설계에 반영처음 수영하는 사람과 꾸준히 수영하는 사람을 위한 상품 안내를 나눕니다.
사진, 여백, 위계
레퍼런스의 레이아웃·서체·색·이미지·그래픽을 관찰하고 실제 시안으로 밀도를 비교했습니다.
설계에 반영강한 히어로 이후에는 여백을 확보하고, 비대칭 배열과 정돈된 상품 비교를 교차합니다.
조사 근거와 해석의 범위 보기
배럴 공식몰의 상품·로고·캠페인 자료를 확인하고, 프로젝트의 목표에 맞춰 콘텐츠와 탐색 구조를 설계했습니다. 저장된 자료만으로 확인할 수 없는 시장 규모, 경쟁사 우위, 인터뷰 인용이나 전환율은 제시하지 않았습니다. 사용자 분석은 기획 가설이며 실사용자 조사로 검증할 필요가 있습니다.
AUDIENCE같은 수영복을 보아도,
같은 수영복을 보아도,
먼저 묻는 질문은 다릅니다.
01 / BEGINNER
실내 수영 입문자
“처음인데, 무엇부터 준비해야 할까?”
- NEEDS
- 필요한 준비물과 기본적인 착용 기준을 쉽게 이해하고 싶다.
- PAIN POINT
- 낯선 용어와 여러 상품 사이에서 첫 선택이 어렵다.
- MOTIVATION
- 첫 수업에 준비된 상태로 참여하고 싶다.
- BARRIER
- 사이즈·커버리지·준비물 누락에 대한 불확실성.
- BEHAVIOR
- 기초 안내와 준비물 정보를 먼저 확인할 것으로 가정.
- DECISION
- 이해하기 쉬운 정보, 편안한 착용을 판단할 단서.
화면의 답 첫 수영 가이드 + 준비물 카테고리
02 / REGULAR
정기적으로 수영하는 사람
“어떤 컷과 등 파임이 나에게 편할까?”
- NEEDS
- 익숙한 루틴에 맞는 핏과 새로운 디자인을 비교하고 싶다.
- PAIN POINT
- 제품 이름만으로 컷·백 형태의 차이를 파악하기 어렵다.
- MOTIVATION
- 수영의 즐거움과 개인의 취향을 이어가고 싶다.
- BARRIER
- 기존 제품과의 차이, 실제 착용 형태에 대한 불확실성.
- BEHAVIOR
- 제품 사진과 상세 기준을 비교할 것으로 가정.
- DECISION
- 핏의 형태, 앞·뒤 모습, 패턴과 제품 정보.
화면의 답 핏 비교 + 컬렉션 탐색
PROBLEM FRAMING
시안에서 보인 문제를 수정 과제로.
시안 검토에서 발견한 문제원인 해석디자인 과제
강한 이미지가 연속되어 답답한 인상
몰입과 정보 전달 구간의 밀도가 비슷함
히어로 이후에는 여백과 이미지 크기의 리듬 확보
브랜드 소개가 마이크로사이트처럼 보임
캠페인 표현에 비해 쇼핑몰 탐색 구조가 부족함
상품군·회원·고객 서비스와 헤더·푸터 보강
탐색 경로가 명확하지 않음
사용자의 준비 상태와 제품 분류가 직접 이어지지 않음
입문과 루틴의 진입점, 핏 기준 제공
색과 아이콘의 표현이 분산됨
반복 수정 과정에서 개별 스타일이 누적됨
로고 색 중심의 상태 색상과 아이콘 규칙 통일
03 / EXPLORE & CHOOSE
세 가지 디자인 방향을 비교하고 하나를 골랐습니다.
제품 탐색, 브랜드 경험, 실험적 표현 중 무엇을 우선할지 비교했습니다.
제품 선택 중심
카테고리와 제품 기준을 먼저 보여주는 명확한 쇼핑 경험.
- 장점
- 목적이 분명한 방문자의 빠른 탐색
- 주의점
- 브랜드 감각과 새로운 표현이 약해질 수 있음
브랜드 감각 + 선택 정보
물의 감성과 패션 이미지를 경험한 뒤, 자신의 기준으로 제품을 탐색.
- 장점
- 시각적 실험과 쇼핑몰 탐색 경로를 함께 설계
- 선택 이유
- 프로젝트의 두 목표를 한 흐름으로 연결
실험적 표현 중심
과감한 타이포그래피와 그래픽으로 차별적인 인상을 만드는 경험.
- 장점
- 강한 개성과 기억에 남는 첫인상
- 주의점
- 읽기·탐색·상품 비교가 복잡해질 수 있음
메시지에 맞춰 콘텐츠 순서를 정했습니다.
- 끌리다히어로 · 브랜드의 세계브랜드에 관심 갖기
- 살펴보다카테고리 · 준비물 · 컬렉션필요한 제품 찾기
- 이해하다입문·루틴 안내와 핏 비교선택 기준 이해하기
- 이어가다브랜드 이야기 · 고객 지원관련 정보 더 살펴보기
04 / DESIGN EVOLUTION
피드백을 반영하며 수정한 화면.
실제 저장된 작업물을 단계별로 비교해 보세요. 아래에서 단계를 선택하면 당시 화면과 피드백, 다음 수정의 이유가 함께 바뀝니다.
- 당시의 시도
- 피드백과 발견
- 다음 수정의 판단
초기 이미지 시안에는 생성된 텍스트와 임시 상품 표현이 포함되어 있습니다. 최종 구현에서는 실제 텍스트와 확보한 상품 자료로 정리했습니다.
05 / ART DIRECTION & REFINEMENT사진의 분위기를 바꾸며,
사진의 분위기를 바꾸며,
브랜드의 표현을 넓혔습니다.
스포츠 동작의 힘에서 패션과 생활의 감각으로 표현의 폭을 넓혔습니다. 이미지는 단순한 장식보다 각 섹션이 전해야 할 내용을 기준으로 선택했습니다.
수영이라는 주제는 즉각적으로 전달됩니다. 다만 초기 전체 시안에서는 동작 중심의 장면이 반복되어 표현의 폭이 좁았습니다.
자연스러운 빛과 수면 반사로 수영 브랜드의 특징을 살리고, 유리와 의복의 질감으로 패션 사진의 분위기를 더했습니다.
SWIM & BEACH
수영장에서 해변까지.
실내 수영만으로 한정되지 않는 브랜드의 세계를 보여주기 위해 해변의 일상 장면을 배치했습니다. 물에서 보낸 시간이 일상으로 이어진다는 메시지를 브랜드 소개에 담았습니다.
디자인 규칙과 세부 수정 보기
DESIGN RULES
화면을 정리하기 위해 세운 기준.
1920 → 1440
1920px 화면에서 사진과 배경은 넓게 배치하고, 본문은 최대 1440px 안에 구성했습니다.
CONTENT 1440
여백을 먼저 확보.
주요 섹션 사이에 넉넉한 여백을 계획하고, 본문 16px를 기준으로 글의 크기와 위계를 정리했습니다.
가나다 Pretendard / 영문 자간 0
로고에서 출발한 색.
주색과 대비를 위한 어두운 변형으로 정리하고, 호버·클릭 상태까지 같은 색 체계를 적용했습니다.
#00B4E6#007599#0C2038
작은 수정도 화면의 인상을 바꿉니다.
쇼핑몰의 상품 분류를 펼침 구조로 정리하고, 로그인·가입·주문조회와 우측 아이콘의 크기를 맞췄습니다.
고정된 세 상품에서 더 많은 상품을 살펴볼 수 있는 가로 탐색으로 확장하고, 콘텐츠 폭 안에서 조작하게 했습니다.
아이콘 형태를 통일한 뒤 필요한 행동에만 사용했습니다. 이중 밑줄과 글자에서 멀어진 간격도 정리했습니다.
작은 화면의 크롭과 가로 넘침을 점검하고 배송·반품·매장·고객센터 등 쇼핑몰의 기본 정보를 보완했습니다.
06 / THE RESULT
브랜드 소개와 상품 탐색을 한 페이지에 담았습니다.
브랜드를 소개하는 사진과 이야기, 상품 비교 정보, 입문자와 정기 수영자를 위한 안내를 담았습니다. 전체 화면은 확대해서 볼 수 있고, 화면 내 인터랙션은 구현 페이지에서 확인할 수 있습니다.
구현 화면 직접 보기 ↗DESKTOP 1920px
MOBILE 390px
WHAT CHANGED
화면은 완성했지만 사용성은 아직 검증하지 않았습니다.
구현한 변화 — 브랜드 이미지의 톤, 사용자별 경로, 핏 비교, 상품 탐색, 쇼핑몰 메뉴와 고객 지원을 하나의 메인으로 정리했습니다.
후속 검증 — 입문자의 준비물 탐색, 정기 수영자의 핏 비교, 모바일 메뉴 이해도를 실제 사용자 과제로 확인할 수 있습니다. 전환율이나 만족도 향상은 아직 측정하지 않았습니다.
작업 자료와 이미지 출처
상품·로고·행사 자료: 배럴 공식몰에서 확보한 프로젝트 에셋. 히어로·라이프스타일·사용자 경로 이미지: 프로젝트에서 생성한 비공식 콘셉트 이미지이며 실제 배럴 제품의 착용 성능을 증명하지 않습니다.