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

백오피스 화면설계서 구성 및 작성 방식

- 로디 선생님의 백오피스 화면설계 원데이 클래스를 수강 후 정리한 자료입니다.

 

백오피스 화면설계서는 주로 PPT를 사용한다.

 

그냥 스크롤 해 볼 수도 있고 대부분 PC 버전을 활용하다 보니까 실측되고 있는
그 규모와는 크게 상관없습니다.
물론 그게 감이 되면 좋긴 한데 그것보다 더 중요한 게 
설명을 얼마큼 정확하게 디테일이 적어주느냐 
화면의 UI에 누락된 것이 있느냐 없느냐 이런 부분이다 보니까 
PPT를 더 많이 선호하고 그 방식이 더 적합하다라고 할 수 있어요.

1. 백오피스 화면설계서의 기본 구성

백오피스 화면설계서는 일반적으로 다음 순서로 구성된다.

• 표지
• 개정 이력
  • 개정 이력에는 일반적인 것처럼 0.1을 시작으로 해서 버전 업 될 때마다 어떤 내용이 변경됐는지가 들어가 있다.
• 화면 목록
  • 우리가 정보 구조도를 만들어서 어떤 메뉴와 페이지를 대체할 것인가를 정리하고 화면 설계서를 만들 때 해당 범위에 대한 것을 복붙해서 화면 목록이라 부른다.
• 플로우 차트
  • 기획자가 만드는 플로우 차트는 화면 간의 연계성을 보여주는 것
  • 화면 간의 연계성 즉 우리가 앞서 소개했던 이 화면 목록들이 어떠한 연계성을 지니고 있는지를 설명해 준다.
  • 로직을 넣는 것은 기획자가 하는 일이 아니다. 다만 기획자는 이 페이지 간의 연계성이 어떻게 되는지를 보여줄 수 있다.
    • "로그인 페이지에서 회원 가입을 갈 수도 있고 아이디 패스워드 찾기를 갈 수도 있고 로그인 이후 페이지로 갈 수도 있죠. 그것은 각각의 페이지 간의 연계성을 보여주는 거예요."
• 컴포넌트 정의
  • 다양한 화면을 구성할 수 있는 요소인데 그 요소들을 동일하게 사용을 해야지만 전체적인 프로젝트에서 몇 명이 일을 하더라도 하나의 일관된 화면 설계가 만들어질 수 있다.
• 개별 화면 설계 (페이지 단위)
  •  해당 페이지와 로케이션 정보 화면 아이디 작성자가 기본 정보로 제공
  • 페이지명은 정보구조에 있다.
  • 레이아웃 영역에서는 와이어 프레임으로 형태를 보여준다.
  •  넘버링 기법을 이용해서 설명을 쓰는 것이 일반적
  • 헤더와 푸터, 반복적인 부분은 반드시 모듈 처리(변경에 유연)
  • 로케이션은 상단 정보 영역에 적고 여기에는 이게 들어갈 거야 정도만 표시를 해 준다.

이 구조는 개발자·기획자·신규 투입 인력이 빠르게 전체 맥락을 이해하도록 돕기 위한 구조다.

 

2. 표지와 개정 이력

2.1 표지

표지는 일반적인 화면설계서 표지 형태를 따른다.
프로젝트명, 문서명, 작성자, 작성일 정도만 있으면 충분하다.

2.2 개정 이력

개정 이력은 보통 v0.1부터 시작한다.

• 버전
• 변경 일자
• 변경 내용
• 변경 사유(선택)

버전이 올라갈 때마다 어떤 내용이 변경되었는지 명확히 기록한다.
이 항목은 문서 신뢰도를 높이는 역할을 한다.

 

3. 화면 목록 (Screen List)

화면 목록은 정보 구조도를 그대로 복사해 붙여 넣은 영역이다.
별도로 새로 만드는 문서가 아니다.

3.1 화면 목록의 목적

화면 목록의 목적은 명확하다.

• 어제 합류한 개발자라도
• 이 문서를 처음 보는 사람이라도

이 프로젝트에 어떤 메뉴와 화면이 있는지 한눈에 이해할 수 있게 하기 위함”이다.

3.2 작성 방식

이미 엑셀이나 스프레드시트로 정리된 정보 구조도가 있다면,
해당 내용을 그대로 복사해 화면 목록으로 사용하면 된다.

이 방식만으로도 다음 효과가 있다.

• 전체 범위 파악
• 메뉴–화면 매핑 이해
• 이후 나오는 화면 설명의 기준점 역할

 

4. 플로우 차트 (기획자 관점)

플로우 차트는 반드시 포함하는 것이 좋다.
다만 기획자가 만드는 플로우 차트의 역할을 정확히 이해해야 한다.

4.1 기획자 플로우 차트의 역할

기획자가 만드는 플로우 차트는 화면 간 연계성을 보여주는 도구다.

• 어떤 화면에서
• 어디로 이동할 수 있는지
• 화면들이 어떤 흐름으로 연결되는지

를 시각적으로 표현한다.

4.2 잘못된 플로우 차트 사용

자주 발생하는 실수는 플로우 차트에 로직을 넣는 것이다.

• 로그인 실패 조건
• 예외 처리
• 내부 분기 로직

이런 내용은 개발자의 설계 영역이다.

기획자는 페이지 내부 로직을 플로우 차트로 표현하지 않는다.
해당 내용은 화면 설계 상세 설명 영역에서 다루는 것이 맞다.

4.3 플로우 차트의 효과

화면 목록 + 플로우 차트를 함께 제공하면
문서를 보는 사람의 머릿속에 다음 그림이 형성된다.

“아, 이 프로젝트는 이런 화면들이 있고
이런 흐름으로 동작하는구나.”

이 상태에서 화면 설명을 순차적으로 보면 이해도가 급격히 높아진다.

 

5. 컴포넌트 정의 영역

컴포넌트 정의는 필수는 아니지만, 포함할 경우 설계 품질이 크게 올라간다.

5.1 컴포넌트 정의의 목적

컴포넌트 정의의 목적은 다음과 같다.

• 팀원 간 화면 표현 방식 통일
• 인수인계 시 동일한 화면 품질 유지
• 기획 품질의 지속성 확보

5.2 정의 대상 컴포넌트 예시

• 라디오 버튼
• 체크박스
• 플러스 / 마이너스 버튼
• 업 / 다운 버튼
• 인풋 필드
• 키워드 탭
• 텍스트 에어리어 등

이 요소들을 프로젝트 전반에서 동일하게 사용해야
여러 명이 작업해도 하나의 일관된 설계가 유지된다.

5.3 컴포넌트 관리가 안 된 팀의 특징

• 화면마다 템플릿이 다름
• 같은 기능인데 UI가 다름
• 설계자마다 표현 방식이 제각각

이는 기획 기본 개념이 부족하다는 신호로 해석될 수 있다.

 

6. 네비게이션 위치 표시

개별 화면 설명에 들어가기 전,
현재 화면의 위치를 네비게이션 상에서 시각적으로 표시하는 방식을 추천한다.

예:

• 좌측 메뉴에서 현재 위치를 빨간색 박스로 강조

이 방식은 다음 효과가 있다.

• “내가 지금 어느 메뉴의 화면을 보고 있는지” 즉시 인지
• 앞서 본 화면 목록과의 연결 강화

네이버 지도에서 ‘내 위치’를 표시해 주는 것과 같은 개념이다.

 

 

7. 개별 화면 설계 구성

본격적인 화면 설명은 화면 ID 단위로 진행한다.

7.1 기본 정보 영역

각 화면에는 다음 기본 정보가 포함된다.

• 화면 ID
• 화면명(페이지명)
• 로케이션 정보
• 작성자

이 정보들은 모두 정보 구조도에 이미 있는 내용이다.
새로 정의하는 것이 아니라 그대로 가져온다.

7.2 레이아웃 영역

레이아웃 영역에는 와이어프레임 형태로 화면 구조를 표현한다.

• 좌/우 분할
• 테이블 영역
• 필터 영역
• 버튼 위치 등

7.3 설명 영역 (넘버링 기법)

레이아웃 오른쪽에는 설명 영역을 둔다.
이때 넘버링 기법을 사용한다.

• ①, ②, ③ … 번호를 부여
• 영역 단위 또는 요소 단위로 설명

예:

• ② 데이터 테이블 영역
• ②-1 선택 제외 버튼
• ②-2 일괄 처리 버튼

이 방식은 개발자와의 커뮤니케이션에서 매우 효과적이다.

 

 

8. 공통 영역은 반드시 모듈화

헤더, 푸터, 공통 내비게이션은 모든 페이지에 반복해서 그리지 않는다.

8.1 왜 모듈화해야 하는가

1. 반복 영역이 본문을 압박한다
2. 변경 시 모든 페이지를 수정해야 한다

PPT 기반 설계서에서는 특히 치명적이다.

8.2 올바른 처리 방식

• 헤더 / 푸터는 별도 모듈 페이지로 관리
• 본문에서는 “공통 헤더 적용” 정도로만 표시

프론트 설계에서 공통 네비게이션을 모듈로 처리하는 것과 동일한 개념이다.

 

 

9. 로케이션 정보 작성 시 주의점

로케이션 정보는 기본 정보 영역에 한 번만 작성한다.

• 본문 설명에 반복해서 적지 않는다
• 화면 상단 로케이션 영역만 참고하도록 유도한다

로케이션을 본문에 다시 적으면 다음 문제가 발생한다.

• 중복 정보
• 공간 낭비
• 수정 시 불일치 발생 가능성

본문에는

“해당 화면에 표시되는 영역”
정도만 설명하면 충분하다.

 

정리하자면...

백오피스 화면설계서는 단순한 UI 설명 문서가 아니다.

• 프로젝트 구조 이해
• 화면 간 흐름 인지
• 운영 관점 사고
• 팀 단위 협업을 고려한 설계

이 모든 것을 증명하는 문서다.