전용 앱 화면 디자인 기본 원칙

1. 공통 디자인 시스템부터 만든다

고객사마다 화면을 새로 디자인하면 유지보수가 어렵습니다.

먼저 다음 항목을 표준화해야 합니다.

• 기본 색상
• 강조 색상
• 글자 크기
• 버튼 높이
• 입력 필드 높이
• 모서리 둥글기
• 여백
• 아이콘 스타일
• 팝업 형태
• 카드 디자인
• 오류 메시지 표시 방식

예를 들어 다음처럼 기준을 정할 수 있습니다.

기본 버튼 높이: 48
입력 필드 높이: 48
화면 좌우 여백: 16
카드 간격: 12
모서리 반경: 10
기본 제목 크기: 20
본문 크기: 15

 

이 기준을 공통 리소스로 관리하면 앱 전체의 디자인이 일관됩니다.

---

2. 화면 구조는 단순하게 구성한다

전용 업무 앱은 사용자가 빠르게 기능을 찾고 입력할 수 있어야 합니다.

권장 구조는 다음과 같습니다.

상단
- 화면 제목
- 뒤로가기
- 검색·새로고침·설정

본문
- 조회 조건
- 주요 정보
- 목록 또는 카드
- 입력 영역

하단
- 저장
- 취소
- 다음 단계
- 주요 작업 버튼

 

한 화면에 너무 많은 기능을 넣지 않는 것이 중요합니다.

---

3. 목록형과 카드형을 구분한다

목록형이 적합한 경우

• 거래처
• 품목
• 작업지시
• 문서 목록
• 게시글
• 점검 내역
• 재고 현황

표시 항목이 많으면 표 형태보다 모바일에서는 카드형이 더 읽기 쉽습니다.

카드형 예시

작업지시번호: WO-202607-001
품목명: 제품 A
수량: 1,000 EA
상태: 작업 중
작업일: 2026-07-16

 

카드 하단에 다음 버튼을 배치할 수 있습니다.

상세
수정
작업 시작
완료

 

---

4. 업무 상태는 색상과 배지로 구분한다

업무 앱에서는 상태를 빠르게 식별해야 합니다.

예시:

• 대기: 회색
• 진행 중: 파란색
• 완료: 초록색
• 오류: 빨간색
• 보류: 주황색
• 승인대기: 보라색

단, 색상만으로 상태를 표현하면 안 됩니다.

● 진행 중
● 완료
● 오류

 

처럼 문자와 배지를 함께 표시해야 합니다.

---

5. 입력 화면은 길이와 정렬을 통일한다

입력 필드의 좌우·상하 정렬이 맞지 않으면 화면이 복잡해 보입니다.

권장 형태는 다음과 같습니다.

품목명
[                           ]

수량
[                           ]

작업일
[                           ]

비고
[                           ]

 

라벨과 입력 필드는 같은 기준선과 폭을 사용합니다.

입력값의 특성에 따라 키보드도 구분해야 합니다.

• 수량: 숫자 키보드
• 이메일: 이메일 키보드
• 전화번호: 전화번호 키보드
• 날짜: 날짜 선택기
• 코드: 검색 팝업
• 긴 내용: 다중 입력창

---

6. 버튼은 역할별로 구분한다

버튼은 너무 많으면 사용자가 무엇을 눌러야 할지 헷갈립니다.

주요 버튼

한 화면에 하나만 강조합니다.

예:

• 저장
• 스캔
• 작업 시작
• 승인 요청

보조 버튼

• 취소
• 닫기
• 초기화
• 이전

위험 버튼

• 삭제
• 폐기
• 취소 처리

삭제 버튼은 빨간색 계열과 확인 팝업을 함께 사용합니다.

---

7. 모바일에서는 하단 고정 버튼이 효과적이다

입력 화면이 길 경우 저장 버튼이 화면 아래로 내려가면 불편합니다.

따라서 다음처럼 주요 버튼을 하단에 고정하는 것이 좋습니다.

[취소]        [저장]

 

또는

[작업 시작]

 

한 손으로 조작할 수 있도록 하단에 배치합니다.

---

8. 하단 탭은 3~5개가 적당하다

전용 앱의 하단 메뉴는 너무 많지 않게 구성합니다.

예시:

홈
업무
조회
알림
안내

 

문서 스캔 앱이라면:

홈
스캔
문서함
명함
안내

 

중앙의 핵심 기능은 아이콘과 크기를 강조할 수 있습니다.

---

9. 검색과 필터는 목록 상단에 둔다

업무 앱에서는 데이터가 많기 때문에 검색과 조건조회가 중요합니다.

추천 구성:

[검색어 입력] [검색]

기간
[시작일] ~ [종료일]

상태
[전체 ▼]

 

자주 사용하는 조건은 화면에 직접 표시하고, 세부 조건은 ‘상세검색’ 팝업으로 분리합니다.

---

10. 팝업은 목적에 따라 구분한다

알림 팝업

저장이 완료되었습니다.
[확인]

 

확인 팝업

선택한 문서를 삭제하시겠습니까?
[취소] [삭제]

 

선택 팝업

• 품목 선택
• 거래처 선택
• 작업자 선택
• 문서분류 선택

입력 팝업

• 수량 입력
• 사유 입력
• 승인 의견 작성

팝업 배경, 제목, 버튼 색상도 공통화해야 합니다.

---

고객사별 화면 차이는 테마로 처리

고객사마다 다음 항목은 바뀔 수 있습니다.

• 회사 로고
• 앱 이름
• 대표 색상
• 메뉴 구성
• 배경 이미지
• 기능 노출 여부

하지만 버튼 위치, 입력 필드, 목록 구조까지 모두 바꾸면 유지보수가 어려워집니다.

공통 레이아웃
+ 고객사 로고
+ 고객사 색상
+ 기능 설정

 

형태가 적합합니다.

---

권장 디자인 구조

AppTheme
├─ Colors
├─ Typography
├─ Spacing
├─ Buttons
├─ Entry
├─ Card
├─ Dialog
└─ Icons

 

.NET MAUI에서는 다음 파일로 분리할 수 있습니다.

Resources
├─ Styles
│  ├─ Colors.xaml
│  ├─ Typography.xaml
│  ├─ Buttons.xaml
│  ├─ Inputs.xaml
│  └─ Cards.xaml
└─ Images

 

---

화면 유형별 권장 형태

홈 화면

• 사용자 정보
• 오늘 할 일
• 주요 업무 바로가기
• 최근 작업
• 알림
• 상태 요약

목록 화면

• 검색
• 필터
• 정렬
• 카드 목록
• 새로고침
• 추가 버튼

상세 화면

• 기본정보
• 상태
• 관련 이력
• 첨부파일
• 주요 처리 버튼

입력 화면

• 필수 항목 우선
• 선택 항목 접기
• 자동완성
• 코드검색
• 하단 저장 버튼

대시보드

• 숫자 요약
• 상태별 건수
• 최근 오류
• 처리 대기
• 간단한 차트

---

제조업용 앱에서 특히 중요한 점

현장용 앱은 사무용 앱과 다릅니다.

• 장갑을 끼고 사용할 수 있음
• 화면을 오래 보지 않음
• 조명이 밝거나 어두울 수 있음
• 네트워크가 불안정할 수 있음
• 한 손으로 조작할 수 있음
• 숫자와 상태를 빠르게 확인해야 함

따라서 다음 기준이 좋습니다.

큰 버튼
큰 글자
높은 대비
짧은 입력
단순한 화면
명확한 상태
오류 시 재시도

 

---

피해야 할 화면 디자인

• 한 화면에 너무 많은 정보 표시
• 버튼마다 색상이 모두 다름
• 입력 필드 폭과 높이가 제각각
• 아이콘 의미가 불명확함
• 작은 글자
• 색상만으로 상태 표현
• 저장 버튼이 화면마다 다른 위치
• 팝업 디자인이 화면마다 다름
• 고객사마다 완전히 다른 UI
• 모바일에서 PC용 표를 그대로 사용

---

추천 디자인 방향

전용 앱 개발사에는 다음 방향이 가장 현실적입니다.

모던한 카드형 UI
+ 일관된 입력 폼
+ 큰 주요 버튼
+ 상태 배지
+ 하단 탭
+ 고객사별 테마
+ 공통 디자인 시스템

 

핵심은 다음과 같습니다.

화면 구조는 공통화
고객사 색상과 로고만 변경
업무별 기능은 모듈화

 

이렇게 설계하면 신규 앱 개발 속도가 빨라지고 기존 앱의 디자인 개선도 한 번에 반영할 수 있습니다.