안드로이드 할 줄 몰라도 Ai로 개발부터 배포까지 가능할까 4 - 와이어프레임, 화면 정의서

오늘은 와이어프레임과 화면정의서를 작성해 보려 한다.
일단 난 앱을 전문적으로 개발해 보지 않은 사람으로서 와이어프레임이란 단어를 사실 처음 들어봤다.
그래서 개념부터 GPT에 질문을 했다.

Q. 와이어프레임 이건 뭐야? 처음들어봐 설명해줘

A.  📌 와이어프레임이란? 👉 앱 화면을 “디자인 없이 구조만 그린 설계도” 입니다. 쉽게 말하면 한 줄 정리 👉 와이어프레임 = 디자인 없는 UI 설계도

📱 예시로 이해하기 (MGCS 앱) 디자인 없이 그린 화면 [MGCS APP] Animal Name: [________] Motor Activity ( ) 1  ( ) 2  ( ) 3  ( ) 4  ( ) 5 Brainstem Reflex ( ) 1  ( ) 2  ( ) 3  ( ) 4  ( ) 5 Consciousness ( ) 1  ( ) 2  ( ) 3  ( ) 4  ( ) 5 ------------------------ Total Score : 10 Status : Coma ------------------------ [SAVE]   [LOAD]

음.. 보고 나니 설계 때 이미 작성을 한 것이 아닌가..!
(갑자기 할일이 줄어든 거 같아 이득 같은 기분 ㅎㅎ)
그럼 설계 작성글에 제목을 바꿔야 하나 싶지만
개념은 여기에 정리했으므로.. ㅎㅎ

더 전체 와이어프레임을 보고 싶다면 아래글을 봐주시면 감사하겠습니다 ㅎㅎ

2026.03.16 - [분류 전체 보기] - 안드로이드 할 줄 몰라도 Ai로 개발부터 배포까지 가능할까 3 - 설계

이어서 화면 정의서를 작성해 보도록하자.
사실 화면 정의서는 개발자가 작성할 일이 있나? 싶다
왜냐하면 나는 회사 다니면서 프로젝트 수행 시 기획자 분들이 따로 계셨고
화면 정의서는 기획자분들이 다 작성 해주셨기때문에..!
작성된 화면 정의서를 개발적인 개념으로 수정한 경험만 있기 때문에

한 번도 안 해보는 것보단 이번 기회에 해보는 게 더 좋겠지 싶다.

---

화면정의서

1️⃣ Main Screen (MGCS 평가) - (GPT) 

📌 화면 개요

항목내용

화면명	MGCS 평가 화면
화면 ID	MAIN_01
설명	소동물 MGCS 점수를 평가하고 저장하는 메인 화면

---

📌 UI 구성

UI 요소타입설명

Animal Name	EditText	동물 이름 입력
Motor Activity	RadioGroup	1~5 점수 선택
Brainstem Reflex	RadioGroup	1~5 점수 선택
Consciousness	RadioGroup	1~5 점수 선택
Total Score	TextView	총점 표시
Status	TextView	상태 표시
SAVE 버튼	Button	데이터 저장
LOAD 버튼	Button	최근 데이터 불러오기
MENU 버튼	Button	메뉴 이동

---

📌 기능 정의

- 점수 선택 시 총점 자동 계산
- 총점에 따른 상태 자동 표시

[상태 기준]
10 이상 → Coma
7 이상 → Severe
4 이상 → Moderate
그 외 → Normal

- SAVE 클릭 시 데이터 저장
- LOAD 클릭 시 최근 데이터 불러오기
- MENU 클릭 시 메뉴 화면 이동

 

---

📌 이벤트 정의

이벤트동작

Radio 선택	점수 계산
SAVE 클릭	저장
LOAD 클릭	최근 데이터 조회
MENU 클릭	화면 이동

---

 

1️⃣ Main Screen (MGCS 평가) -  (GPT가 작성한 것을 내가 수정)

📌 화면 개요

항목내용

화면명	MGCS 평가 화면
화면 ID	MAIN_01
설명	소동물 MGCS(혼수척도평가) 점수를 평가하고 저장,로드하는 메인 화면

---

📌 UI 구성

UI 요소타입설명

Animal Name	EditText	동물 이름 입력
Motor Activity	RadioGroup	1~6 점수 선택
Brainstem Reflex	RadioGroup	1~6 점수 선택
Consciousness	RadioGroup	1~6 점수 선택
Total Score	TextView	총점 표시
Status	TextView	상태 표시
SAVE 버튼	Button	데이터 저장
LOAD 버튼	Button	최근 데이터 리스트로 불러오기, 리스트에서 선택 시 데이터 불러오기
MENU 버튼	Button	메뉴 이동

---

📌 기능 정의

- 점수 선택 시 총점 자동 계산
- 총점에 따른 상태 자동 표시

[상태 기준]
3~8점      → Grave
9~14점    → Guarded
15~18점  → Good

- [SAVE] 버튼 클릭 시 → 이름 작성 & 차트 선택  → DB 저장
- LOAD → 최근 기록 불러오기 or 최근 저장된 기록중 불러올 값을 선택하여 불러오기
- MENU 클릭 시 메뉴 화면 이동

 

 

---

📌 이벤트 정의

이벤트동작

Radio 선택	총점 계산 & 상태 변경
SAVE 클릭	이름 작성 & 차트 선택 후 데이터 저장
LOAD 클릭	최근 데이터 리스트로 조회, 조회된 데이터 선택 시 데이터 불러오기
MENU 클릭	화면 이동

 

2️⃣ Menu Screen - (GPT)

📌 화면 개요

항목내용

화면명	메뉴 화면
화면 ID	MENU_01
설명	기록 및 차트 화면 이동

---

📌 UI 구성

UI 요소타입설명

Records 버튼	Button	기록 화면 이동
Chart 버튼	Button	차트 화면 이동
Back 버튼	Button	이전 화면

---

📌 기능 정의

- Records 클릭 → 기록 화면 이동
- Chart 클릭 → 차트 화면 이동
- Back → Main 화면 이동

 

2️⃣ Menu Screen -  (GPT가 작성한 것을 내가 수정)

📌 화면 개요

항목내용

화면명	메뉴 화면
화면 ID	MENU_01
설명	메인화면, 기록 및 차트 화면 이동

---

📌 UI 구성

UI 요소타입설명

MGCS 버튼	Button	메인 화면 이동
Records 버튼	Button	기록 화면 이동
Chart 버튼	Button	차트 화면 이동

---

📌 기능 정의

- MGCS            → Main 화면 이동

- Records 클릭  → 기록 화면 이동
- Chart 클릭      → 차트 화면 이동

 

 

3️⃣ Records Screen (기록 리스트)  - (GPT)

📌 화면 개요

항목내용

화면명	기록 리스트
화면 ID	RECORD_01
설명	저장된 MGCS 기록 조회 및 삭제

---

📌 UI 구성

UI 요소타입설명

Record List	RecyclerView	기록 리스트
Name	TextView	동물 이름
Score	TextView	총점
Date	TextView	저장 날짜
Delete	버튼 / Swipe	기록 삭제
Back	Button	이전 화면

---

📌 기능 정의

- 저장된 기록 리스트 표시
- 최신순 정렬
- 기록 삭제 기능 제공

 

---

📌 이벤트 정의

이벤트동작

리스트 로드	DB/파일에서 데이터 가져오기
삭제 버튼	해당 기록 삭제
Swipe	삭제

---

 

3️⃣ Records Screen (기록 리스트)  -  (GPT가 작성한 것을 내가 수정)

📌 화면 개요

항목내용

화면명	기록 리스트
화면 ID	RECORD_01
설명	저장된 MGCS 기록 조회 , 차트 선택 및 삭제

---

📌 UI 구성

UI 요소타입설명

Record List	RecyclerView	기록 리스트
Name	TextView	동물 이름
Score	TextView	총점
Status	TextView	상태
Date	TextView	저장 날짜
Chart	SelectBox	차트 선택 , 선택 필수 아님
Delete	버튼 / Swipe	기록 삭제
Back	Button	이전 화면

---

📌 기능 정의

- 저장된 기록 리스트 표시
- 최신순 정렬
- 기록 삭제 기능 제공

- 리스트 스크롤 뷰로 조회
- 차트 선택,제외 가능

 

---

📌 이벤트 정의

이벤트동작

리스트 로드	파일(JSON)에서 데이터 가져오기
스크롤 뷰	리스트 스크롤 뷰로 조회 (최신순)
차트 선택	원하는 차트에 추가, 삭제 가능. 차트 선택 필수 아님
삭제 버튼	해당 기록 삭제
Swipe	삭제

 

4️⃣ Chart Screen (차트 선택)  - (GPT)

📌 화면 개요

항목내용

화면명	차트 선택
화면 ID	CHART_01
설명	그래프에 사용할 기록 선택

---

📌 UI 구성

UI 요소타입설명

Record List	RecyclerView	기록 리스트
Checkbox	CheckBox	선택
Selected Count	TextView	선택 개수 표시
Delete 버튼	Button	선택 삭제
Show Graph 버튼	Button	그래프 이동
Back 버튼	Button	이전 화면

---

📌 기능 정의

- 기록 선택 (최대 5개)
- 선택 개수 표시
- 선택 데이터 삭제
- 그래프 화면 이동

 

---

📌 이벤트 정의

이벤트동작

체크 선택	선택 리스트 추가
5개 초과	선택 제한
삭제 버튼	선택 데이터 삭제
그래프 버튼	그래프 화면 이동

 

4️⃣ Chart Screen (차트 선택) -  (GPT가 작성한 것을 내가 수정)

📌 화면 개요

항목내용

화면명	차트 선택
화면 ID	CHART_01
설명	5개의 차트 중 선택 하여  그래프로 상세보기

---

📌 UI 구성

UI 요소타입설명

Chart List	RecyclerView	차트 리스트
Show Graph 버튼	Button	그래프 이동
Back 버튼	Button	이전 화면

---

📌 기능 정의

- 5개의 차트 고정
- Chart 1~5 까지 리스트 중 한개의 차트를 선택 하여 그래프로 상세보기
- 그래프 화면 이동

 

---

📌 이벤트 정의

이벤트동작

차트 선택

그래프로 차트 상세보기

 

5️⃣ Graph Screen (그래프)  - (GPT)

📌 화면 개요

항목내용

화면명	그래프 화면
화면 ID	GRAPH_01
설명	선택된 기록을 그래프로 표시

---

📌 UI 구성

UI 요소타입설명

Chart View	Chart	점수 그래프
X Axis	Axis	날짜
Y Axis	Axis	점수
Back 버튼	Button	이전 화면

---

📌 기능 정의

- 선택된 기록 기반 그래프 표시
- 날짜별 점수 표시

 

---

📌 이벤트 정의

이벤트동작

화면 진입	그래프 데이터 생성
Back	이전 화면

 

5️⃣ Graph Screen (그래프) -  (GPT가 작성한 것을 내가 수정)

📌 화면 개요

항목내용

화면명	그래프 화면
화면 ID	GRAPH_01
설명	선택된 기록을 그래프로 표시, 그래프 하단엔 그래프의 Data 리스트 조회

---

📌 UI 구성

UI 요소타입설명

Chart View	Chart	점수 그래프
X Axis	Axis	날짜
Y Axis	Axis	점수(삭제 예정)
Data 표시 수치	ValueText	점수, 이름
최신 10개 Data만 표시	VisibleXRangeMaximum(10)	최신 10개 기본 조회, 옆으로 스클로하여 10개씩 조회 가능
그래프 하단에 Data list	RecyclerView	그래프에 포함된 Data list
Back 버튼	Button	이전 화면

---

📌 기능 정의

- 선택된 차트 기반 그래프 표시
- 날짜별 점수,이름 표시

- 최신 10개 기본 조회, 옆으로 스클로하여 10개씩 조회 가능

 

---

📌 이벤트 정의

이벤트동작

화면 진입	그래프 데이터 생성
최신 10개 Data만 표시	최신 10개 기본 조회, 옆으로 스클로하여 10개씩 조회 가능
그래프에 조회된 Data list	그래프에 포함된 Data 하단에서 list로 조회 가능
Back	이전 화면

---

 

---

📊 전체 화면 흐름  - (GPT)

MAIN_01
↓
MENU_01
├ RECORD_01
└ CHART_01
↓
GRAPH_01

 

---

📊 전체 화면 흐름 -  (GPT가 작성한 것을 내가 수정)

Main Screen (MGCS 평가)
 ㅣ      ↓
 ㅣ    Records Screen (저장 기록)
 ㅣ     └ Write Name & Select Charts to Save (이름 작성 & 저장할 차트 선택)
 ㅣ            └ Save (기록 저장)
  ↓
Menu
 ├ Records Screen (저장된 기록 리스트)
       └ Delete History & Change Selected Charts  ( 기록 삭제 & 차트 변경)
 └ Chart Screen (차트 선택)
        ↓
     Graph Screen (그래프 보기)

 

 

 

---

 

화면정의서를 작성하면 좋은 게
머릿속에서 이미 정리가 되어있어서 개발할 때 시간을 단축할 수 있다고 생각한다.
다 안다고 생각해도 사실 정리를하면서 나오는 게 많기 때문이다.
그리고 작성을 미리 해둬야 개발하면서 놓치지는 부분이 더 적을 수 있다는 장점이 있다.

그래서 나는 실무를 할때 직접 화면정의서까지 작성하는 건 아니지만
일단 뭘 할지 큰 틀을 먼저 작성 후 세부 개발 사항을 정리하고 타임라인을 정한 뒤 개발을 한다.
이렇게 하면 시간도 단축되고 놓치는 부분도 적고, 무엇보다 시간관리가 수월하기 때문이다.

다음 게시글에선 타임라인을 작성해 보겠다.