🔥 스터디 참가 신청
home
🔥지금 바로 신청하기! 🔥
home

와이어프레임과 프로토타입 구별하기

유형
아티클공유
서비스
작성자
태그
와이어프레임
프로토타입
사용성
테스트
UX개념
가이드문서
디자인프로세스
Created time
2026/08/28 08:17
정렬용
202605
주차
26년 5월
#아티클공유
이 글은 와이어프레임과 프로토타입을 구별하고 왜 구별해야 하며 각각 어떤 의의를 가지고 만드는지와 현업에서 많이 쓰이는 웹은 무엇인지 깔끔하게 정리하여 올려주셨기 때문에 개념정리를 하기에 좋다고 생각하여 공유해 본다.
내용 요약
와이어프레임과 프로토 타입은 실제 디자인이 구현되기 전 단계이며, 종종 실무에선 두 개념을 혼동하여 사용하는 경우도 있으나 이 둘은 정확하게 구분되어야함. (제작되는 시기,용도,의미에서 큰 차이가 있기 때문), 또한 큰 방향성 조율은 제작이 간단한 와이어프레임으로 합의해 나가는 것이 경제적임
와이어 프레임 : 선(Wire)와 틀(Frame)을 잡는다. (마치 건축에서의 설계도와 비슷함) / 와이어 프레임의 구성에는 내용,구조,흐름,기능 등이 들어가며 손그림 or 피피티 등 가벼운 형식으로 만드는 것을 선호 또한 내용을 표시할 텍스트+이미지를 표시할 프레임 위주로 제작. 프레임에는 X를 넣는 것이 일반적이며 그 외 요소는 최대한 추상화하고 색상으로 중요 부분을 강조함.
프로토 타입 : 실제와 비슷하게 구현된 상태. 마치 건축 모형을 만드는 단계와 유사. 구체적인 이미지 없이 간단한 인터렉션만 테스트해볼 수 있는 단계(로우 피델리티 프로토타입)과 실제와 거의 유사한 모습을 보여주는(하이 피델리티 프로토타입)이 존재. 로우 피델리티는 주로 페이지 간 어색한 흐름을 잡아내고, 기술을 검토하며 하이 피델리티는 본격적인 ‘사용성’검토가 가능함
✅좋았던 점
처음 UI/Ux 개념을 잡아갈 때 혼동하기 쉬운 점을 명확하게 설명해 줘서 좋았으며, 와이어프레임이나 프로토타입을 실제로 사용해볼 수 있는 링크를 함께 첨부하여 유용했다.
⛔아쉬운 점
아예 개념을 잘 모르는 사람들은 어려운 용어나 설명들을 이해하기에 조금 어려워 보이고, 각 참고자료의 장점이 더 구체적으로 설명된다면 더 좋을 것 같다.