한눈에 보는 정의
색과 이미지를 빼고 상자와 선으로 화면의 배치와 순서를 먼저 그린 설계도.
이런 말로 들어요
- 와이어프레임에서 순서부터 확정하고 디자인 들어갈게요.
- 이 단계에서는 색은 신경 쓰지 마시고 내용 배치만 봐 주세요.
그림으로 보기
와이어프레임은 색과 사진 없이 무엇을 어떤 순서로 보여 줄지 먼저 정하는 단계입니다. 이후 목업과 프로토타입으로 이어집니다.
하캄솔루션 자체 제작 설명도식자세히 알아보기
와이어프레임은 집을 짓기 전의 평면도와 같습니다. 어디에 제목, 사진, 버튼, 폼이 들어가는지와 무엇을 먼저 보여 줄지를 정합니다. 색이나 사진이 없어서 "예쁜지"보다 "필요한 내용이 맞는 순서로 있는지"에 집중해 의견을 주고받을 수 있습니다. 이후 디자인 시안(목업)과 눌러 보는 프로토타입으로 이어집니다.
실무 예시
예를 들어 병원 메인 페이지라면 와이어프레임에서 "대표 진료 3개 → 의료진 → 후기 → 예약 버튼" 순서를 먼저 합의하고, 그다음에 사진과 색을 입힙니다.
함께 살펴볼 점
와이어프레임 단계에서 문구와 사진을 대충 넣어 두면 그대로 확정된 줄 알고 넘어가기 쉽습니다. 실제 원고가 들어가면 길이가 달라지니 대략의 글자 수도 함께 정합니다.
AI에게 이렇게 요청해 보세요
병원 홈페이지 메인 화면의 와이어프레임을 텍스트로 그려 줘. 섹션 순서, 각 섹션의 제목·버튼·필요한 사진을 목록으로 적고, 모바일 순서도 따로 적어 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- What is wireframing? - Figma Resource Library 새 창
와이어프레임이 최종 디자인 전 단계의 초안이며 이후 변경을 전제로 한다는 설명을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정