🌟 나의 UX/UI 레벨

🖼️ 와이어프레임(Wireframe)

웹사이트나 모바일 앱 등의 디지털 제품을 개발하기 전에 전체적인 화면 구성, 정보 배치, 사용자 인터페이스 흐름을 단순한 도형과 텍스트로 시각화한 설계 초안이다.

로우피델리티

• 선, 박스, 텍스트 위주로 구성된 가장 단순한 형태의 와이어프레임
• 디자인보다는 기능, 콘텐츠 배치, 사용자 흐름 등 구조적인 측면에 집중
• 빠르게 아이디어를 공유하거나 수정할 때 유용함

미드피델리티

• 실제 콘텐츠 레이아웃과 유사한 구성으로 시각적인 정보 전달이 좀 더 구체적임
• 폰트 크기, 버튼 위치, 내비게이션 구조 등을 더 명확히 표현
• 개발자나 디자이너와 구체적인 협의 단계에서 활용

하이피델리티

• 색상, 이미지, 폰트 스타일, 실제 텍스트 등 완성된 화면에 가까운 형태
• 사용자 테스트나 클라이언트에게 실제 서비스 모습을 보여줄 때 사용
• 개발 전 최종적인 디자인 확인에 적합함

---

🚀 프로토타입(Prototype)

프로토타입은 실제 서비스처럼 작동하는 방식과 비슷하게 사용자의 흐름과 기능을 사전에 검증하기 위해 제작된다.

Wireframe, Prototype 차이

항목	와이어프레임 (Wireframe)	프로토타입 (Prototype)
정의	제품의 구조와 레이아웃을 단순하게 표현한 설계도	실제 사용 흐름을 시뮬레이션할 수 있는 인터랙티브한 모형
목적	정보 배치와 기능 구조 확인, 초기 설계 커뮤니케이션 용도	사용자 경험 테스트, 기능 시연, 사용자 흐름 검증
형태	박스, 선, 텍스트 위주의 정적인 화면	버튼, 링크 등의 인터랙션이 포함된 동적인 화면
정밀도	로우 피델리티 (저해상도), 시각적 요소 최소화	하이 피델리티 (고해상도)도 가능, 실제 제품처럼 보여짐
사용 시기	아이디어 구상 초기 단계	디자인 확정 직전, 또는 사용자 피드백 수집 단계

---

📱웹과 앱의 비교

웹이란?

인터넷 브라우저를 통해 접속하는 서비스이다.
설치 없이 URL로 접근 가능하고, 모든 기기에서 동작하지만 하드웨어 접근이나 푸시알림 같은 기능은 제한적이다.

앱이란?

스마트폰에 설치해서 사용하는 애플리케이션이다.
성능이 좋고 카메라, 위치, 푸시알림 등 디바이스 기능과 밀접하게 연동 가능하지만, 앱스토어 등록과 설치 과정이 필요하다

웹과 앱의 차이

항목	웹(Web)	앱(App)
접근 방식	URL 접속	앱 설치 후 사용
디바이스 접근	제한적 (일부 API만 사용 가능)	자유로움 (카메라, GPS 등 대부분 가능)
업데이트	서버에서 바로 적용 가능	사용자 업데이트 필요
속도/성능	느릴 수 있음	빠르고 부드러운 성능
유지비용	비교적 낮음	유지, 배포 비용이 높음

---

🎨 피그마로 와이어프레임 실습