화면 정의서 예시 모음 — 로그인·회원가입·관리자 화면 작성법
안녕하세요 여러분 제가 개발 문서 자동 생성기를 아예 웹사이트로 만들어 보았습니다.
많은 방문과 이용 부탁드립니다~
https://reportai.kr/dev/
화면 정의서는 서비스나 시스템을 만들 때 각 화면에 어떤 정보가 보이고, 사용자가 어떤 동작을 할 수 있으며, 그 결과가 어떻게 처리되는지를 정리한 문서입니다. 기획자, 디자이너, 개발자, QA가 같은 기준으로 화면을 이해할 수 있게 해주는 실무 문서라고 볼 수 있습니다.
이번 글에서는 가장 많이 쓰이는 로그인 화면, 회원가입 화면, 관리자 화면을 예시로 화면 정의서 작성법을 정리해보겠습니다. 처음 화면 정의서를 작성하는 분이라면 아래 예시 구조를 그대로 가져가서 프로젝트에 맞게 수정해도 좋습니다.
요약 포인트
- 화면 정의서는 화면의 구성요소, 입력값, 버튼 동작, 예외 상황을 정리한 문서입니다.
- 로그인·회원가입 화면은 입력값 검증과 오류 메시지를 꼼꼼히 작성해야 합니다.
- 관리자 화면은 검색, 필터, 목록, 상세, 권한, 엑셀 다운로드 같은 기능 정의가 중요합니다.
- 개발자가 바로 이해할 수 있도록 화면 ID, 항목명, 필수 여부, 동작 조건을 명확히 적는 것이 좋습니다.
화면 정의서란?
화면 정의서는 말 그대로 화면을 정의하는 문서입니다. 와이어프레임이 화면의 배치를 보여주는 문서라면, 화면 정의서는 그 화면 안에 있는 버튼, 입력창, 목록, 팝업, 메시지, 이동 경로 등을 더 자세히 설명하는 문서입니다.
예를 들어 로그인 화면이라면 단순히 아이디와 비밀번호 입력창이 있다는 것만으로는 부족합니다. 아이디를 입력하지 않았을 때 어떤 메시지를 보여줄지, 비밀번호를 5회 틀리면 계정을 잠글지, 로그인 성공 후 어느 화면으로 이동할지까지 정의해야 합니다.
화면 정의서 기본 구성
| 항목 |
설명 |
| 화면 ID |
화면을 구분하기 위한 고유 번호입니다. 예: LOGIN_001 |
| 화면명 |
로그인, 회원가입, 관리자 회원 목록 등 화면 이름을 작성합니다. |
| 화면 설명 |
해당 화면의 목적과 주요 기능을 간단히 설명합니다. |
| 접근 경로 |
사용자가 해당 화면에 진입하는 경로를 작성합니다. |
| 화면 구성요소 |
입력창, 버튼, 체크박스, 목록, 탭, 팝업 등을 정리합니다. |
| 입력값 검증 |
필수 입력, 형식 제한, 글자 수 제한 등을 작성합니다. |
| 버튼 동작 |
클릭 시 처리되는 기능과 이동 화면을 작성합니다. |
| 예외 메시지 |
오류, 실패, 미입력, 권한 없음 등의 메시지를 정의합니다. |
1. 로그인 화면 정의서 예시
화면 개요
| 항목 |
내용 |
| 화면 ID |
LOGIN_001 |
| 화면명 |
로그인 |
| 화면 목적 |
사용자가 아이디와 비밀번호를 입력해 서비스에 로그인하는 화면 |
| 접근 경로 |
메인 화면 > 로그인 버튼 클릭 |
| 로그인 성공 시 |
메인 화면 또는 이전에 접근하려던 화면으로 이동 |
| 로그인 실패 시 |
오류 메시지 노출 |
화면 구성요소
| 구성요소 |
유형 |
필수 여부 |
설명 |
| 아이디 입력창 |
Input |
필수 |
이메일 또는 사용자 ID 입력 |
| 비밀번호 입력창 |
Password Input |
필수 |
비밀번호 입력, 입력값은 마스킹 처리 |
| 아이디 저장 |
Checkbox |
선택 |
체크 시 다음 접속 시 아이디 자동 입력 |
| 로그인 버튼 |
Button |
- |
아이디와 비밀번호 검증 후 로그인 처리 |
| 회원가입 링크 |
Link |
- |
회원가입 화면으로 이동 |
| 비밀번호 찾기 링크 |
Link |
- |
비밀번호 찾기 화면으로 이동 |
입력값 검증 규칙
- 아이디 미입력 시: “아이디를 입력해주세요.” 메시지 노출
- 비밀번호 미입력 시: “비밀번호를 입력해주세요.” 메시지 노출
- 이메일 형식이 아닌 경우: “올바른 이메일 형식이 아닙니다.” 메시지 노출
- 로그인 정보가 일치하지 않는 경우: “아이디 또는 비밀번호가 일치하지 않습니다.” 메시지 노출
- 탈퇴한 계정인 경우: “탈퇴한 계정입니다. 고객센터에 문의해주세요.” 메시지 노출
버튼 동작 정의
| 버튼 |
동작 |
| 로그인 |
입력값 검증 후 로그인 API 호출. 성공 시 메인 화면으로 이동 |
| 회원가입 |
회원가입 화면 SIGNUP_001로 이동 |
| 비밀번호 찾기 |
비밀번호 찾기 화면 FIND_PW_001로 이동 |
2. 회원가입 화면 정의서 예시
화면 개요
| 항목 |
내용 |
| 화면 ID |
SIGNUP_001 |
| 화면명 |
회원가입 |
| 화면 목적 |
신규 사용자가 서비스 이용을 위한 계정을 생성하는 화면 |
| 접근 경로 |
로그인 화면 > 회원가입 클릭 |
| 가입 성공 시 |
회원가입 완료 화면 또는 로그인 화면으로 이동 |
화면 구성요소
| 구성요소 |
유형 |
필수 여부 |
설명 |
| 이메일 |
Input |
필수 |
로그인 ID로 사용할 이메일 입력 |
| 이메일 중복 확인 |
Button |
필수 |
이미 가입된 이메일인지 확인 |
| 비밀번호 |
Password Input |
필수 |
영문, 숫자, 특수문자 조합 8~20자 |
| 비밀번호 확인 |
Password Input |
필수 |
비밀번호와 동일한 값 입력 |
| 이름 |
Input |
필수 |
사용자 이름 입력 |
| 휴대폰 번호 |
Input |
선택 또는 필수 |
서비스 정책에 따라 필수 여부 결정 |
| 이용약관 동의 |
Checkbox |
필수 |
서비스 이용약관 동의 |
| 개인정보 처리방침 동의 |
Checkbox |
필수 |
개인정보 수집 및 이용 동의 |
| 마케팅 수신 동의 |
Checkbox |
선택 |
이벤트 및 혜택 안내 수신 동의 |
| 가입하기 |
Button |
- |
입력값 검증 후 회원가입 처리 |
입력값 검증 규칙
- 이메일 미입력 시: “이메일을 입력해주세요.”
- 이메일 형식 오류 시: “올바른 이메일 형식이 아닙니다.”
- 이미 가입된 이메일인 경우: “이미 사용 중인 이메일입니다.”
- 비밀번호 미입력 시: “비밀번호를 입력해주세요.”
- 비밀번호 규칙 불일치 시: “비밀번호는 영문, 숫자, 특수문자를 포함해 8자 이상 입력해주세요.”
- 비밀번호 확인 불일치 시: “비밀번호가 일치하지 않습니다.”
- 필수 약관 미동의 시: “필수 약관에 동의해주세요.”
버튼 동작 정의
| 버튼 |
동작 |
| 이메일 중복 확인 |
이메일 형식 검증 후 중복 확인 API 호출 |
| 약관 전체 동의 |
필수 및 선택 약관 체크박스 전체 선택 또는 해제 |
| 가입하기 |
필수 입력값과 약관 동의 여부 확인 후 회원가입 API 호출 |
| 취소 |
로그인 화면으로 이동 |
3. 관리자 회원 목록 화면 정의서 예시
화면 개요
| 항목 |
내용 |
| 화면 ID |
ADMIN_USER_001 |
| 화면명 |
관리자 회원 목록 |
| 화면 목적 |
관리자가 가입 회원을 검색, 조회, 상태 변경할 수 있는 화면 |
| 접근 권한 |
관리자 계정만 접근 가능 |
| 접근 경로 |
관리자 로그인 > 회원 관리 > 회원 목록 |
검색 영역 구성요소
| 구성요소 |
유형 |
설명 |
| 검색어 |
Input |
이메일, 이름, 휴대폰 번호로 검색 |
| 회원 상태 |
Select |
전체, 정상, 휴면, 탈퇴, 정지 중 선택 |
| 가입일 |
Date Picker |
시작일과 종료일 선택 |
| 검색 |
Button |
입력 조건에 맞는 회원 목록 조회 |
| 초기화 |
Button |
검색 조건을 기본값으로 초기화 |
목록 영역 구성요소
| 컬럼명 |
설명 |
| 번호 |
목록 순번 표시 |
| 회원 ID |
회원 고유 식별값 표시 |
| 이메일 |
회원 이메일 표시, 클릭 시 상세 화면 이동 |
| 이름 |
회원 이름 표시 |
| 상태 |
정상, 휴면, 탈퇴, 정지 상태 표시 |
| 가입일 |
회원 가입 일시 표시 |
| 최근 로그인 |
마지막 로그인 일시 표시 |
| 관리 |
상세보기, 상태 변경 버튼 제공 |
관리자 기능 정의
- 회원 이메일 클릭 시 회원 상세 화면 ADMIN_USER_002로 이동합니다.
- 검색 결과가 없을 경우 “검색 결과가 없습니다.” 메시지를 노출합니다.
- 목록은 기본적으로 가입일 최신순으로 정렬합니다.
- 페이지당 20개씩 노출하며, 하단에 페이지네이션을 제공합니다.
- 엑셀 다운로드 버튼 클릭 시 현재 검색 조건에 맞는 회원 목록을 다운로드합니다.
- 회원 상태 변경은 관리자 권한에 따라 버튼 노출 여부를 다르게 처리합니다.
예외 메시지
| 상황 |
메시지 |
| 권한 없는 접근 |
접근 권한이 없습니다. |
| 검색 결과 없음 |
검색 결과가 없습니다. |
| 조회 실패 |
회원 목록을 불러오지 못했습니다. 잠시 후 다시 시도해주세요. |
| 엑셀 다운로드 실패 |
엑셀 다운로드 중 오류가 발생했습니다. |
4. 관리자 회원 상세 화면 정의서 예시
화면 개요
| 항목 |
내용 |
| 화면 ID |
ADMIN_USER_002 |
| 화면명 |
관리자 회원 상세 |
| 화면 목적 |
관리자가 특정 회원의 상세 정보를 확인하고 상태를 관리하는 화면 |
| 접근 경로 |
관리자 회원 목록 > 이메일 클릭 |
상세 정보 항목
| 항목 |
설명 |
| 회원 ID |
회원 고유 식별값 |
| 이메일 |
로그인 ID로 사용하는 이메일 |
| 이름 |
회원 이름 |
| 휴대폰 번호 |
회원 연락처 |
| 회원 상태 |
정상, 휴면, 탈퇴, 정지 상태 |
| 가입일 |
회원 가입 일시 |
| 최근 로그인 |
마지막 로그인 일시 |
| 마케팅 수신 동의 |
동의 여부와 동의 일시 |
버튼 동작 정의
| 버튼 |
동작 |
| 목록 |
회원 목록 화면으로 이동 |
| 수정 |
수정 가능한 항목을 입력 모드로 변경 |
| 저장 |
수정된 회원 정보를 저장 |
| 계정 정지 |
확인 팝업 노출 후 회원 상태를 정지로 변경 |
| 정지 해제 |
확인 팝업 노출 후 회원 상태를 정상으로 변경 |
화면 정의서 작성 시 자주 빠지는 항목
- 빈 화면 상태: 검색 결과가 없거나 데이터가 없을 때 어떤 문구를 보여줄지 정의해야 합니다.
- 로딩 상태: 데이터를 불러오는 동안 로딩 표시를 할지 정해야 합니다.
- 오류 상태: API 실패, 네트워크 오류, 권한 오류 메시지를 작성해야 합니다.
- 버튼 비활성화 조건: 필수값 미입력 시 버튼을 비활성화할지, 클릭 후 메시지를 보여줄지 정해야 합니다.
- 권한별 화면 차이: 일반 관리자와 최고 관리자가 볼 수 있는 버튼이 다를 수 있습니다.
- 모바일 대응: 반응형 서비스라면 모바일에서 목록, 버튼, 검색 영역이 어떻게 보이는지도 정의해야 합니다.
화면 정의서 작성 팁
- 화면 ID는 프로젝트 전체에서 중복되지 않게 작성합니다.
- 버튼 클릭 시 이동 화면이나 API 호출 여부를 명확히 적습니다.
- 입력값 검증은 개발자와 QA가 바로 테스트할 수 있을 정도로 구체적으로 작성합니다.
- 오류 메시지는 실제 사용자에게 보여줄 문구 그대로 작성하는 것이 좋습니다.
- 관리자 화면은 권한, 검색 조건, 정렬 기준, 다운로드 여부를 꼭 포함합니다.
- 화면 정의서와 API 명세서, 테스트 케이스 문서는 서로 연결되도록 작성하면 좋습니다.
화면 정의서 간단 템플릿
| 구분 |
작성 내용 |
| 화면 ID |
예: LOGIN_001 |
| 화면명 |
예: 로그인 |
| 화면 목적 |
사용자가 로그인을 수행하는 화면 |
| 접근 경로 |
메인 > 로그인 |
| 구성요소 |
입력창, 버튼, 체크박스, 목록, 팝업 등 |
| 입력값 검증 |
필수값, 형식, 글자 수, 중복 여부 등 |
| 버튼 동작 |
클릭 시 처리 내용, 이동 화면, API 호출 여부 |
| 예외 메시지 |
오류, 실패, 미입력, 권한 없음 등 |
| 비고 |
추가 정책, 권한 조건, 참고 사항 |
마무리
화면 정의서는 단순히 화면을 설명하는 문서가 아니라, 기획과 디자인, 개발, QA를 연결하는 기준 문서입니다. 특히 로그인, 회원가입, 관리자 화면처럼 대부분의 서비스에 공통으로 들어가는 화면은 예외 상황과 검증 규칙이 많기 때문에 처음부터 꼼꼼하게 작성하는 것이 좋습니다.
처음 작성할 때는 어렵게 느껴질 수 있지만, 화면 ID, 구성요소, 입력값 검증, 버튼 동작, 오류 메시지만 빠짐없이 정리해도 실무에서 충분히 활용할 수 있는 화면 정의서를 만들 수 있습니다.
댓글