241011 내배캠 사전캠프 TIL

와이어프레임 활용하기

 

https://brunch.co.kr/@second-space/27

UX의 기본, 와이어프레임은 어떻게 작성하는 것일까

https://blog.wishket.com/%EA%B6%81%EA%B8%88%ED%96%88%EC%96%B4%EC%9A%94-%EC%99%80%EC%9D%B4%EC%96%B4%ED%94%84%EB%A0%88%EC%9E%84%EC%9D%B4-%EB%AD%90%EC%A3%A0/

궁금했어요. '와이어프레임'이 뭐죠?

 

와이어프레임(Wireframe)은 ‘선(Wire)’만을 사용하여 빠르게 결과물의 윤곽을 만들어내는 작업으로 3D 모델링이나 건축분야에서 먼저 쓰이던 용어입니다. IT 쪽으로 넘어와서는 디자인적인 요소를 최대한 배제하고 주요 화면의 기초적인 레이아웃과 UI 요소만을 배치해 보는 문서로서 인터렉션 디자인의 중요한 단계로 자리 잡았습니다. 주로 여러 작업자들이 협력하여 하나의 결과물을 만들어내야 하거나 장기적으로 진행되는 큰 프로젝트에서 활용됩니다.

 

* 스토리보드와는 어떤 차이가 있나요?
현장에서 스토리보드와 와이어프레임은 자주 혼용되곤 합니다. 하지만 스토리보드(Storyboard)는 영화, 광고 등의 영상분야에서 쓰이던 용어가 IT 쪽으로 넘어온 것이기에 ‘Context’와 ‘Interation’을 통한 변화상을 포함하는 ‘동적인’ 상태를 기술하는 문서라는 점이 다릅니다. 이에 반해, 와이어프레임은 어떤 화면에 어떤 내용, 기능이 담겨야 한다는 것을 ‘정적, 평면적’으로 기술합니다. 따라서 먼저 낮은 정확도(Low-fidelity, ‘Lo-fi’)의 와이어프레임을 작성하여 큰 틀을 잡고, 스토리보드 작업을 통해 사용성을 고려하며 차차 구체화(High-fidelity, ‘Hi-fi’) 해 나가는 것이 효율적입니다. 또한 이렇게 작성된 Hi-fi 와이어프레임은 종종 프로토타이핑을 위해서 사용되기도 합니다.

 

와이어프레임은 왜 필요한가요?

프로젝트를 의뢰하는 고객은 IT 전문가가 아니고, 프로젝트를 수행하게 될 작업자들은 목표가 되는 서비스나 시스템을 잘 알지 못하는 것이 일반적입니다. 설령 상위 기획(비즈니스 모델, 서비스 컨셉이나 정책 등)이 완료된 상태라 하더라도, 이들 문서는 대체로 추상적이어서 문서를 읽는 모든 이가 각자 나름대로의 최종 서비스를 상상하게 될 위험이 있습니다. 와이어프레임은 상위 기획이나 사전 교섭 시의 이슈들을 ‘시각적’으로 정리하여 고객과의 커뮤니케이션을 보다 섬세하고 정확하게 진행할 수 있는 자료가 되어주는 한편, 작업자들에게는 굵직한 기능과 플로우를 되도록 빠른 시기에, 되도록 직관적인 방법으로 공유하여 각 작업자가 자신의 자리에서 필요한 정보들을 수집할 수 있도록 가이드라인이 되어줍니다.

 

 

앱개발 와이어프레임 예시)

 

https://velog.io/@andthensome/%EC%95%B1%EA%B0%9C%EB%B0%9C%EA%B0%80%EC%9D%B4%EB%93%9C-%EC%99%80%EC%9D%B4%EC%96%B4%ED%94%84%EB%A0%88%EC%9E%84-%EA%B8%B0%EB%8A%A5%EB%A6%AC%EC%8A%A4%ED%8A%B8

앱 개발 가이드 - 기획 와이어프레임, 기능리스트

 

 

https://yjuni22.tistory.com/8

240926 내배캠 사전캠프 TIL

 

피그마를 활용하여 와이어프레임 작성 및 협업을 할 수 있다.