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

작업 실습 가이드

Back-Office 화면설계 템플릿 운용 기준

 

1. 왜 템플릿 가이드가 필요한가

이 양식은 단순한 예제가 아니라 실제 실무에서 사용 중인 표준 템플릿이다.

특히 에이전시 환경에서는:

• 산출물의 형식 통일이 곧 품질로 인식됨
• 문서가 하나의 결과물처럼 보이지 않으면
  • 재요청
  • 수정 요구
  • 심한 경우 대금 지급 지연

까지 발생할 수 있다.

👉 팀원이 3명이든 10명이든,
누가 작업하든 같은 문서처럼 보여야 한다.

그 역할을 하는 것이 템플릿 가이드다.

 

템플릿 가이드가 있어야지만 협업을 했을 때 좀 오차 없이 하나의 어떤 양식으로 만들어질 수 있겠죠.
특히 에이전시 사이드에서는 하나의 산출물처럼 보이지 않으면
대금 지급을 하지 않거나 재요청을 할 만큼 굉장히 좀 민감한 부분이기도 합니다.
팀원이 3명이든 10명이든 간에 템플릿을 가지고 일관된 산출물을 만드는 게 중요한 부분이다.

 

2. 템플릿과 가이드의 차이

템플릿 (Template)

• 재사용 가능한 형식
• 표지, 표, 박스, 구조, 레이아웃
• “복사해서 쓰는 틀”

가이드 (Guide)

• 리더가 명확하게 지시한 작성 규칙
• 어떻게 써야 하는지에 대한 설명서

즉,

템플릿 = 형태
가이드 = 사용법

이다.

 

- 컴포넌트에서는 반드시 해당 컴포넌트를 활용할 것이다.
- 화면 경로 및 아이디를 체크해 달라.
- 넘버링은 라운드형으로 해서 샘플과 같은 것으로 표기해 달라.
- 본문 폰트는 노토산스를 기준으로 해서 8포인트를 기본으로 하고 최소 7포인트에서 최대 10포인트까지 해달라

수정 이력 카드가 어떻게 언제 시점부터 보여지는지도 있는데 이런 이력 카드 같은 경우는 보통 1차 배포, 그러니까 이 문서가 공식적으로 배포된 이력부터는 수정 이력 카드가 필요하고 그 이전에서 변경하는 것들, 작업자가 작업하는 것들은 이 이력 카드까지 붙이지 않아요.

그냥 버전 업을 할 수는 있지만 이력 카드가 붙어서 공유되는 것들은 이제 어쨌든 한 번 배포라고 하는 시점 이후에 기재를 하게 됩니다.

 

 

3. 화면설계 템플릿 기본 구성

이 템플릿은 다음 구조로 구성된다.

1. 표지
2. 개정 이력
3. 화면 목록
4. 플로우 차트
5. 컴포넌트 정의
6. 화면 설계 상세 페이지

이 순서는 의미가 있다.
임의로 바꾸지 않는다.

 

4. 플로우 차트 가이드 기준

플로우 차트 작성 시 기준은 명확하다.

• 화면 간 연계성만 표현
• 화면 ID 기준으로 표시
• 로직, 조건, 개발 흐름 ❌

가이드 문구 예시:

“이 플로우 차트에서는
해당 파일에 포함된 화면 간의 연계성을
화면 ID 기준으로 표시해 주세요.”

 

 

5. 컴포넌트 가이드 기준

컴포넌트 영역은 선택 사항이 아니다.

• 반드시 정의된 컴포넌트를 사용할 것
• 동일한 UI 요소를 임의로 새로 만들지 말 것
• 팀 전체의 화면 일관성을 유지하기 위함

컴포넌트가 무너지면:

• 화면마다 버튼 모양이 다름
• 입력 필드 스타일 제각각
• “같은 시스템 같지 않은” 문서가 됨

 

6. 화면 설계 상세 페이지 가이드

필수 체크 항목

화면 설계 상세 페이지에서는 반드시 다음을 지킨다.

• 화면 경로(Location) 및 화면 ID 명시
• 헤더/푸터/공통 영역은 모듈 박스 처리
• 넘버링은 라운드형 숫자
• 샘플과 동일한 스타일 유지

 

 

7. 폰트 및 가독성 기준

• 기본 폰트: Noto Sans
• 기본 사이즈: 8pt
• 최소: 7pt / 최대: 10pt
• 본문은 가독성 우선, 장식 금지

이 기준은:

• 인쇄
• PDF 공유
• 장시간 검토

를 모두 고려한 값이다.

 

8. 수정 이력 카드 운영 원칙

언제 붙이는가?

• 1차 공식 배포 이후부터
• 외부 공유가 발생한 시점부터

언제 붙이지 않는가?

• 개인 작업 중
• 내부 수정 단계
• 아직 배포 전인 상태

즉,

“버전 업 ≠ 수정 이력 카드”

이다.

 

9. 화면 설계 작업 순서 (중요)

특정 메뉴를 설계할 때 순서를 지키는 것이 핵심이다.

권장 작업 순서

1. 목록 페이지
2. 상세(수정 포함) 페이지
3. 등록 페이지

이 순서는 절대 거꾸로 하지 않는다.

 

레이아웃 작성을 하실 때 그러니까 이 템플릿 가이드 공통 영역 설계
그 다음에 레이아웃과 설명처럼 개별적인 작업을 하시게 되는 케이스에서 순서에 대해서 말씀을 드렸는데
특정 메뉴의 작업 순서는 일단은 목록을 만들고
상세 / 수정을 그 예시를 만들어 보면서 설계를 해보는 게 좋아요.

 

10. 왜 목록 → 상세 → 등록 순서인가

① 목록부터 만든다

• 실제 데이터가 어떻게 쌓이는지 상상
• “홍길동이 언제, 무엇을 샀는가”
• 실제 운영 상황을 가정

② 상세 페이지를 만든다

• 목록 데이터를 클릭했을 때
• 어떤 정보가 더 필요한지 자연스럽게 드러남
• 옵션, 이미지, 상태값, 이력 등

③ 등록 페이지를 만든다

• 상세 페이지를 기준으로
• “기본값이 비어 있는 상태”라고 생각하면 끝

👉 등록은 상세의 초기 상태다.

 

11. 상세·수정 페이지 통합 원칙

특별한 요청이 없다면:

• 상세 페이지
• 수정 페이지는 하나로 통합한다.

이유

• 페이지 수 감소
• 개발 공수 감소
• 관리자 사용성 증가

 

12. 다른 메뉴 호출 방식 원칙

페이지 전환 ❌

팝업 호출 ⭕

 

예시

• 주문 상세 → 회원 상세
• 주문 상세 → 상품 상세

이 경우

• 흐름이 끊기면 안 됨
• 참고용 정보일 뿐임

그래서

• 팝업으로 호출
• 해당 페이지 ID만 명시
• 팝업 UI를 다시 그릴 필요 없음

표기 예:

“회원 상세 페이지 (POPUP 호출 / PAGE_ID: MB-01)”

 

다른 메뉴를 호출할 때는 보통 팝업으로 호출하죠.
어떤 의미냐면 주문 내역에서 회원 상세를 불러온다면 페이지 전환이 이루어지면 안 되겠죠.

 

이럴 때는 참고용이니까 회원 정보 상세가 팝업으로 오는 건데
이 때, 그 페이지에 아이디를 써주면서 어떤 페이지 호출 이런 식으로 쓰는 겁니다.

그거를 똑같이 다 그릴 필요도 없어요. 그냥 그 페이지 아이디를 쓰면서
그 페이지를 환불 호출이라고 쓰는 것으로 충분한 거죠

 

13. 실습 예시 사고 방식 (상품 관리)

상품 관리 실습 시 이렇게 가정한다.

• 홍길동이 상품을 등록한다
• 상품명: 아이폰 16
• 가격: 999,000원
• 옵션: 색상(레드, 블루)

이 가정을 기준으로:

• 목록 데이터 생성
• 상세 정보 확장
• 등록 폼 구성

이 방식이 가장 빠르고 오류가 적다.

 

핵심 요약

• 템플릿은 협업을 위한 약속
• 가이드는 리더의 명확한 지시
• 목록 → 상세 → 등록 순서를 반드시 지킨다
• 상세·수정은 통합이 기본
• 참고용 정보는 팝업으로 호출
• 하나의 문서처럼 보이는 것이 목표다