백오피스 화면설계 심화 (9)

기획전 구성 시 화면설계 원칙 정리

1. 기획전 상품 호출 구조의 기본 전제

기획전은 새로운 상품을 만드는 기능이 아니다.
이미 존재하는 상품을 불러와서 조합·배치하는 기능이다.

따라서 기획전 생성 시 흐름은 항상 다음과 같다.

1. 기획전 생성 페이지 진입
2. 상품 추가 버튼 클릭
3. 상품 목록 페이지 호출 (팝업)
4. 체크 → 체크 → 등록
5. 기획전 구성 완료

 

2. 이미 존재하는 페이지는 다시 그리지 않는다

중요한 원칙이 하나 있다.

이미 존재하는 페이지는 화면설계서에서 다시 그리지 않는다.

 

왜냐하면

• 상품 목록 페이지는 이미 상품 관리 메뉴에 존재
• UI, 검색 조건, 테이블 구조가 이미 정의되어 있음
• 동일한 화면을 또 그리는 것은 중복 설계

 

3. 올바른 설계 표현 방식

기획전 생성 화면에서 상품을 불러올 때는
다음 표현만으로 충분하다.

 

❌ 잘못된 방식

• 상품 목록 페이지 전체를 다시 설계
• 팝업용 목록 화면을 새로 그림
• 동일 UI를 두 번 정의

⭕ 올바른 방식

• 기존 페이지 ID 명시
• 호출 방식만 명확히 표기

예시 문구

상품 추가 버튼 클릭 시
상품 목록 페이지 (PAGE_ID: PRD-01) 팝업 호출

 

이 한 줄이면 끝이다.

 

4. “팝업으로 불러옴” 표현의 의미

이 표현이 담고 있는 의미는 명확하다.

• UI는 기존 페이지 그대로 사용
• 기능은 “선택 후 반환”
• 신규 설계 대상 아님
• 참조 호출

그래서

• 팝업용 별도 화면 ID ❌
• 팝업용 별도 레이아웃 ❌

 

5. 상세 페이지 정보가 많을 때의 처리 방식

기획전뿐 아니라 BO 전반에서 공통적으로 적용되는 원칙이다.

정보가 많을 때의 기준

• 스크롤로 늘리지 않는다
• 페이지를 쪼개지도 않는다
• 탭(Tab)으로 구분한다

 

6. 탭 구성의 대표적인 예

아까 회원 관리 예시처럼

• 일반 정보
• 주문 정보
• 환불 정보

이처럼 성격이 다른 정보 묶음은 탭이 가장 적절하다.

기획전에서도 마찬가지다.

예시:

• 기본 정보
• 전시 상품 목록
• 노출 설정
• 이력/관리 정보

 

7. 탭도 “페이지”로 카운팅해야 한다 (중요)

많이들 실수하는 부분이다.

탭은 UI일 뿐이지만
정보 구조 관점에서는 페이지다.

왜 페이지로 봐야 하는가?

• 각 탭마다 정보 구조가 다름
• 입력 항목, 검증, 상태값이 다름
• 작업 공수와 난이도가 다름

 

8. 정보 구조에서의 탭 처리 원칙

정보 구조도(IS)에서는 다음처럼 처리한다.

• 기획전 상세 (부모 페이지)
  • 기본 정보 탭 (PAGE)
  • 상품 구성 탭 (PAGE)
  • 노출 설정 탭 (PAGE)
  • 이력 탭 (PAGE)

UI에서는 탭이지만
설계·공수·작업량 산정에서는 각각 1페이지다.

 

9. 이 원칙을 지키지 않으면 생기는 문제

• “이거 한 페이지 아니었어요?” 논쟁 발생
• 공수 산정 오류
• 일정 지연
• 기획자 책임 전가

👉 그래서 탭도 페이지로 센다는 원칙은
초반에 반드시 명시해야 한다.

 

정리하자면

• 기획전은 상품을 “새로 만드는 것”이 아니라 “불러오는 것”
• 이미 존재하는 페이지는 다시 설계하지 않는다
• 페이지 ID + 팝업 호출 표현으로 충분
• 정보가 많을 때는 탭 사용
• 탭도 정보 구조상 페이지로 카운팅