SYSTEM BLUEPRINT

아임웹 자사몰
화면과 운영 흐름을 같이 설계합니다

고객 탐색, 운영자 수정, 데이터 이관이 하나의 흐름으로 이어지도록 정리한 스토리보드입니다.

고객 시나리오

고객이 상품을 발견하고 주문하기까지

메인, 카테고리, 상세페이지가 끊기지 않게 이어져 구매로 자연스럽게 들어가는 흐름

메인 진입

브랜드 비주얼과 신상품이 가장 먼저 보입니다.

카테고리 선택

귀걸이, 목걸이, 반지로 빠르게 좁혀 갑니다.

상세 확인

이미지와 설명을 같은 톤으로 읽을 수 있습니다.

주문 시작

장바구니와 구매 버튼이 명확하게 보입니다.

결제 완료

주문 후 다음 행동이 자연스럽게 이어집니다.

고객 | 화면 01

브랜드 메인 홈

/
브랜드 메인 홈
NEW IN,BEST,STORY
ROSE ACCESSORY
MENU · CATEGORY · LOOKBOOK
NEW COLLECTION
빛이 닿는 순간 더 선명해지는 액세서리
브랜드 스토리와 상품 진열을 함께 보여 주는 첫 진입 화면입니다.
카테고리
귀걸이
목걸이
반지
빠른 이동

[화면 개요 및 목적]

첫 화면에서 브랜드 감도와 신상품 가치를 함께 보여 주는 메인 구조입니다.

[핵심 기능 로직]

상단 비주얼, 바로가기, 신상품 진입을 한 화면에 묶어 첫 클릭을 만들도록 설계합니다.

  • 메인 배너와 신상품 영역을 한눈에 배치
  • 브랜드 스토리와 카테고리로 자연스럽게 연결
고객 | 화면 02

카테고리 목록

/category
카테고리 목록
FILTER,PINK GOLD
정렬신상품
재고구매 가능
가격필터 적용
색상로즈 톤
포인트 이어링
작은 크기지만 얼굴선을 또렷하게 잡아 주는 대표 상품입니다.
데일리 목걸이
일상에서 자주 쓰는 심플한 라인으로 구성했습니다.
레이어드 반지
여러 개를 함께 매치해도 자연스러운 두께감을 유지합니다.
시즌 한정 세트
선물용 구성과 패키징까지 함께 보여 주는 세트 상품입니다.

[화면 개요 및 목적]

상품이 많아져도 정리가 쉬운 필터형 목록 화면입니다.

[핵심 기능 로직]

가격, 재고, 색상 기준을 단순화해 상품 탐색 시간을 줄입니다.

  • 필터와 정렬을 쉽게 보이는 카드형 구조
  • 상품 사진과 핵심 문구를 반복 규칙으로 정리
고객 | 화면 03

상세페이지 포맷

/product/detail
상세페이지 포맷
DETAIL,ZOOM,BUY
대표 이미지
상품 분위기를 한 장에서 읽게 합니다
상품명하트 펜던트
주요 문구가볍고 섬세한 데일리 포인트
버튼장바구니 / 바로 구매
구매 포인트
이미지와 설명이 섞이지 않게 정리해, 상세페이지를 읽는 동안 바로 구매로 이어지도록 만듭니다.

[화면 개요 및 목적]

상품 설명, 구매 버튼, 핵심 포인트를 읽기 쉽게 묶는 상세페이지 구조입니다.

[핵심 기능 로직]

대표 이미지와 설명을 분리해 보여 주고, 구매 버튼은 항상 눈에 들어오게 둡니다.

  • 상세 설명과 구매 버튼을 분리
  • 상품 추가 시 반복 가능한 템플릿 구조
운영자 시나리오

운영자가 배너와 상세페이지를 직접 수정하는 흐름

비개발자가 매일 할 수 있는 수정 업무를 간단한 화면으로 묶어 인수인계 가능하게 만듭니다.

관리자 진입

수정이 필요한 영역으로 바로 들어갑니다.

배너 교체

메인 배너 이미지를 바꾸고 바로 미리봅니다.

상세 수정

상품 설명과 이미지 순서를 직접 조정합니다.

미리보기

모바일과 데스크톱 노출을 함께 점검합니다.

반영 완료

수정 결과를 저장하고 운영에 넘깁니다.

운영자 | 화면 01

운영자 대시보드

/admin
운영자 대시보드
ADMIN,EDIT
관리 메뉴
배너 관리상세페이지상품 등록미리보기
이번 주 수정
배너 3건
상세 5건
노출 중3개 배너
상품128개
변경 대기2개
배너 편집
이미지 교체 후 미리보기를 눌러 바로 반영할 수 있습니다.
상세 템플릿
이미지교체 가능
문구수정 가능
버튼연결 유지

[화면 개요 및 목적]

메인, 카테고리, 상세페이지를 한 곳에서 관리하는 운영자 시작 화면입니다.

[핵심 기능 로직]

관리 메뉴를 최소화하고 이번 프로젝트에서 자주 만질 기능만 보여 줍니다.

  • 배너, 상세, 상품 등록을 각각 분리
  • 수정 이력과 변경 대상을 한눈에 표시
운영자 | 화면 02

배너 교체 화면

/admin/banner
배너 교체 화면
UPLOAD,PREVIEW
배너 업로드
원본 파일로고 포함
문구직접 수정
노출 위치메인 상단
파일을 올리고 문구를 바꾸면 바로 미리보기에서 결과를 확인하는 흐름입니다.
PREVIEW
새 배너가 메인에서 어떻게 보이는지 먼저 확인합니다
디자인 수정이 아니라 관리 작업으로 처리되도록 화면을 단순화합니다.

[화면 개요 및 목적]

배너 이미지를 올리고 문구를 바꾼 뒤 미리보는 수정 화면입니다.

[핵심 기능 로직]

업로드와 미리보기를 분리해 실수 없이 교체할 수 있게 합니다.

  • 이미지와 문구를 따로 수정
  • 미리보기 후 반영하는 안전한 절차
운영자 | 화면 03

상세페이지 수정 화면

/admin/template
상세페이지 수정 화면
TEMPLATE,LIVE,SAVE
상세페이지 구조
섹션 수6개
대표 이미지고정
설명 문구수정
한 번 만든 템플릿을 반복 사용해 상품이 늘어도 운영 부담을 줄입니다.
실시간 미리보기
상품명과 포인트 설명이 보이는 순서를 정리해 비개발자도 구조를 이해하기 쉽게 만듭니다.
저장즉시
반영예상
공유가능
교육포함

[화면 개요 및 목적]

상품 상세 템플릿을 보고 문구와 이미지를 직접 수정하는 화면입니다.

[핵심 기능 로직]

반복되는 상품 구조를 템플릿화해 운영자의 작업 시간을 줄입니다.

  • 상품 추가 시 같은 형식을 반복
  • 문구, 이미지, 버튼을 분리해 관리
이관 시나리오

상품 데이터 이관과 검수 흐름

카페24 자산을 아임웹으로 옮긴 뒤 오류를 확인하고 바로 운영 가능한 상태로 마무리합니다.

시트 정리

상품 이미지와 본문 데이터를 먼저 맞춥니다.

검수

누락, 중복, 형식 오류를 한 번에 확인합니다.

수정

문제가 있는 항목만 골라 다시 반영합니다.

반영

정리된 데이터가 운영 사이트에 올라갑니다.

인수인계

운영자가 직접 확인하고 이어 받을 수 있게 마무리합니다.

이관 | 화면 01

상품 데이터 시트

/admin/import
상품 데이터 이관
CSV,C24
업로드 시트
이미지확인 완료
본문매핑 중
오류2건 검토
귀걸이 / 은침정상목걸이 / 길이 누락수정반지 / 이미지 없음수정
반영 결과
상품 128개
이미지 100%
기존 자산을 옮긴 뒤 바로 판매 가능한 상태인지 확인하는 검수 화면입니다.
오류 행이 있으면 어떤 값을 고쳐야 하는지 바로 보이도록 구성합니다.

[화면 개요 및 목적]

카페24 자산을 아임웹용 시트로 정리해 들여오는 화면입니다.

[핵심 기능 로직]

이미지, 본문, 옵션 정보를 나눠 검수하고 누락을 빠르게 잡습니다.

  • 엑셀형 정리로 이관 누락을 줄임
  • 오류 행을 바로 표시해 재작업 범위를 축소
이관 | 화면 02

검수 리스트

/admin/qa
검수 리스트
QA,CHECK
반영 전 확인
메인 배너정상
카테고리정상
상세페이지정상
주문 연결정상
검색 정보정상
오류 없음
바로 운영할 수 있는 상태로 넘기기 위한 최종 점검 화면입니다.

[화면 개요 및 목적]

배포 전에 어떤 항목이 정상인지 빠르게 확인하는 점검 화면입니다.

[핵심 기능 로직]

상태를 한 단어로 보여 줘야 대표가 바로 판단할 수 있습니다.

  • 배너, 카테고리, 주문 연결을 순서대로 확인
  • 정상 여부를 단순하게 표시
이관 | 화면 03

최종 반영

/admin/handoff
최종 반영
HANDOFF,MANUAL
운영 매뉴얼
배너 바꾸기
상세 수정하기
상품 추가하기
대표 혼자서도 참고할 수 있게 짧은 절차로 정리합니다.
인수인계 완료
문서전달 완료
관리자설명 완료
수정 범위확정

[화면 개요 및 목적]

운영 매뉴얼과 인수인계를 마치고 내부에서 직접 이어 받을 수 있게 정리하는 화면입니다.

[핵심 기능 로직]

오픈 직후 필요한 수정 범위를 문서로 남겨 다음 작업 부담을 줄입니다.

  • 운영 매뉴얼과 교육 내용을 한 번에 정리
  • 향후 수정 범위를 명확히 선긋기