APP DEVELOPMENT TERM
와이어프레임
화면의 구조와 기능을 정리한 밑그림
와이어프레임은 색상과 장식보다 화면에 어떤 정보와 버튼을 놓고 사용자가 어디로 이동하는지 먼저 정리한 화면의 밑그림입니다.
30초 이해
와이어프레임은 예쁜 화면을 만들기 전에 필요한 정보와 행동이 빠지지 않았는지 확인하는 설계도입니다
앱 화면을 말로만 설명하면 같은 ‘예약 화면’을 두고도 달력, 시간 선택, 인원, 결제와 취소 안내를 서로 다르게 생각할 수 있습니다. 와이어프레임은 화면마다 보여줄 정보와 사용자의 행동을 단순한 상자와 문장으로 배치해 이런 차이를 일찍 발견하게 합니다.
완성 디자인처럼 색상과 사진을 결정하는 단계는 아닙니다. 정상 화면뿐 아니라 내용이 없을 때, 불러오는 중일 때, 입력이 잘못됐을 때와 권한이 없을 때 무엇을 보여줄지도 함께 정리해야 실제 개발 범위가 분명해집니다.
한 장으로 이해
아이디어가 개발 가능한 화면 구조가 되는 과정
사용자 목표를 정하고 필요한 정보와 행동을 화면에 배치한 뒤 화면 사이 이동과 예외 상태를 확인합니다.
- 01
목표 정하기
이 화면에서 사용자가 끝내야 할 일을 한 문장으로 정합니다.
- 02
정보·행동 배치
제목, 내용, 입력과 주요 버튼의 우선순위를 놓습니다.
- 03
화면 연결
버튼을 눌렀을 때 이동할 화면과 돌아오는 흐름을 잇습니다.
- 04
상태 확인
빈 화면, 오류, 권한 제한과 완료 결과까지 추가합니다.
와이어프레임의 목적은 화면 수를 늘리는 것이 아니라 필요한 기능과 상태를 개발 전에 함께 이해하는 것입니다.
언제 사용하는 개념인가요?
앱 범위를 정할 때
요구사항을 실제 화면과 행동으로 바꿔 필요한 기능과 빠진 단계를 확인합니다.
디자인을 시작할 때
정보와 버튼의 우선순위를 먼저 정해 장식보다 사용 흐름에 집중합니다.
개발 견적을 비교할 때
업체마다 다르게 해석할 수 있는 화면·상태·권한 범위를 같은 기준으로 보여줍니다.
왜 중요한가요?
말로 설명한 기능을 눈에 보이게 만듭니다
요청 문장 안에 숨어 있던 화면, 입력과 처리 결과를 구체적으로 확인할 수 있습니다.
개발 중 큰 변경을 줄입니다
화면 연결과 예외 상태를 일찍 확인하면 완성 후 흐름을 다시 만드는 위험을 줄일 수 있습니다.
기획·디자인·개발의 공통 기준이 됩니다
같은 화면 이름과 완료 조건을 사용해 변경과 검수 내용을 기록할 수 있습니다.
실제 상황 예시
클래스 예약 화면의 와이어프레임을 만든다면
달력 한 장만 그리는 것이 아니라 예약 전후 사용자가 확인할 정보와 실패 상황을 함께 정합니다.
먼저 배치할 핵심 내용
- 수업명·강사·날짜·시간
- 남은 자리와 신청 인원
- 예약 또는 결제 버튼
- 취소 조건과 완료 결과
함께 확인할 상태
- 신청 가능한 시간이 없을 때
- 로그인이 필요하거나 권한이 없을 때
- 결제는 됐지만 예약 확인이 늦을 때
- 예약 마감·취소·변경이 불가능할 때
한 화면의 정상 모습만 정하면 실제 운영 범위가 빠집니다. 사용자가 다음 행동을 할 수 없는 상태까지 보여줘야 개발과 검수 기준이 됩니다.
자주 하는 오해
“와이어프레임은 완성 디자인이다”
정보 구조와 행동을 확인하는 밑그림입니다. 브랜드 색상, 세밀한 간격과 최종 이미지는 UI 디자인 단계에서 구체화합니다.
“홈 화면만 그리면 된다”
주요 기능의 시작·입력·확인·완료와 오류·빈 상태까지 연결해야 실제 범위를 확인할 수 있습니다.
“와이어프레임이 있으면 요구사항 문서는 필요 없다”
화면만으로 보이지 않는 권한, 업무 규칙, 데이터 처리와 외부 연동 조건은 별도 요구사항으로 함께 정리해야 합니다.
우리 서비스에 적용할 때 확인하세요
- 1각 화면에서 사용자가 끝내야 할 행동이 하나로 보이나요?
- 2버튼을 누른 뒤 이동·완료·실패 결과가 연결되어 있나요?
- 3빈 상태·오류·로딩·권한 제한 화면을 확인했나요?
- 4고객 화면의 행동이 관리자 업무와 데이터에 어떻게 반영되나요?
- 5와이어프레임 변경이 요구사항과 견적 범위에도 반영됐나요?
다음 자료
이해한 내용을 바로 적용해보세요
와이어프레임 다음에는 실제 흐름을 눌러보는 프로토타입, 시각 표현을 구체화하는 UI와 전체 행동 순서를 보는 사용자 흐름을 이어서 확인하세요.
예쁜 화면보다 빠진 행동과 상태가 없는지 먼저 확인하세요
주요 화면의 목표, 정보, 버튼, 이동과 예외 상태를 정리하면 디자인과 개발 범위를 같은 기준으로 논의할 수 있습니다.