스마트한 기획자, 디자이너를 위한 홈페이지 제작, 모바일앱 개발 프로젝트 과정 – 와이어프레임 (프로토타입)의 이해와 도구 추천

와이어프레이밍 (Wireframing) 은 홈페이지 제작, 모바일앱 개발 프로젝트 진행 과정 중 화면 디자인 프로세스에서 이뤄지는 중요한 단계입니다. 주로 사용자들이 어떻게 서비스를 사용할 지에 대해서 예상을 하면서, 여러가지 정보의 계층을 정의하고 디자인에 반영하게 됩니다.

보통 프로젝트의 디자인 구현 과정은 다음과 같이 세부적으로 나누어볼수 있습니다.

– UX/UI 디자인 (스케치)

– 와이어프레임

– 고차원 와이어프레임

– 인터랙티브 프로토타입

– 비주얼 (완성된 디자인 시안)

– 코드

디자인에 대한 기획자, 디자이너, 개발자들의 접근방식이 각각 다르고, 프로젝트 유형/규모나 회사의 개발철학, 개발방식, 노하우에 따라서 중간 과정이 생략될 수 있습니다. 단순한 홈페이지인 경우는 스케치 다음에 바로 코딩 작업이 이루어질 수도 있고, 기획자나 디자이너의 역량에 따라서 스케치나 와이어프레임 없이 바로 프로토타입을 제작해 볼 수도 있습니다.

보통 와이어프레이밍은 스케치부터 고차원 와이어프레임을 제작하는 범위를 말하는 것으로 이 과정에서 스케치, 화면설계도 (블루프린트), 와이어프레임, 스토리보드 등의 산출물을 만들어 낼 수 있습니다.

 

UX/UI 디자인 (스케치)

스케치는 단순히 펜과 종이만 이용해서 제작을 하거나, 그림판, 포토샵 같은 디자인프로그램 등을 이용해서 하기도 합니다. 이 과정은 단순히 화면을 그려보는 과정인데, 최대한 아이디어를 이미지로 표현해보고, 자유롭게 수정을 해보는데 목적이 있습니다. 주로 벡터로 제작이 되고, 최근에는 대부분 반응형 디자인을 고려합니다.​

스케치, 어도비XD, 인비전, 마블, 플린토, 피그마는 단순한 스케치 도구가 아니기때문에, 간단한 디자인 (스케치) 작업부터 와이어프레임 제작 및 프로토타이핑까지도 해볼 수 있습니다.

추천 도구​

– 스케치 (Sketch, https://www.sketch.com/)

– 어도비 XD (Adobe XD, https://www.adobe.com/kr/products/xd.html)

– 피그마 (Figma, https://www.figma.com/)

– 인비전 (Invision, https://www.invisionapp.com/)

– 마블 (Marvel, https://marvelapp.com/)

– 플린토 (Flinto, https://www.flinto.com/)

– 웹플로우 (Webflow, https://www.webflow.com/)

– 포토샵 (Photoshop)

– 일러스트레이터 (Illerstrator)

– 파워포인트 (Powerpoint)

– 키노트 (KEYNOTE)​

– 가종 디자인, 문서 편집 프로그램​

– 종이와 펜

​

와이어프레임

선, 박스, 텍스트를 이용해서 좀더 체계적이고 구체적으로 화면을 표현하는 과정입니다. 보통 와이어프레임, 목업, 다이어그램, 플로우차트 등 다양한 방식과 용어로 표현이 될수 있습니다. 홈페이지와 모바일앱 각각에 맞는 화면크기에 맞춰서 페이지를 설정하고 그리드를 설정한 뒤 제작을 하게 됩니다.

파워포인트, 일러스트레이션 같은 문서, 그래픽 도구를 이용할 수도 있지만 좀더 전문적인 와이어프레임도구를 이용하면 쉽고 빠르게 제작을 할 수 있습니다. 초보자들도 조그만 사용법을 배우면 전문가 수준의 와이어프레임을 만들어 낼수 있습니다.​

추천도구

– 발사믹 (Balsamiq, https://balsamiq.com/index.html)

– 와이어프레임 (Wireframe, https://wireframe.cc/)

– 옴니그라플 (Omnigraffl, https://www.omnigroup.com/omnigraffle/)

– 목플러스 (Mockplus, https://www.mockplus.com )

– 목업스 (Mockups, https://moqups.com/ )

– 목플로우 (MockFlow, https://mockflow.com/)

– 모킹버드 (MockingBird, https://gomockingbird.com/home)

– 루시드차트 (Lucidchart, https://www.lucidchart.com)

– 플레어빌더 (FlairBuilder, http://flairbuilder.com/)

– 각종 와이프레임킷, 와이어프레임 템플릿, 와이어프레임 스텐실

https://webdesign.tutsplus.com/tutorials/20-must-have-wireframe-templates-and-ui-kits-for-your-design-library–cms-31568

– 기타사이트

Gliffy, Creatly, Mockup Designer, Power Mockup

​

동적 와이어프레임 (프로토타입)

보통 동적 와이어프레임은 기본적인 와이어프레임에 색상을 넣거나, 화면이동, 단순한 애니메이션 등을 추가하는 등 좀더 동적인 요소까지 포함하는 것입니다. 고차원 와이어프레임과 프로토타입은 경계를 명확히 나누기 힘들고 사용하는 도구도 거의 대동소이 합니다. 굳이 나누자면 완성도의 차이인데, 와이어프레임에 비해 프로토타입은 출시하고자 하는 서비스와 거의 유사할 정도의 완성도로 제작이 됩니다.

아래 소개되는 도구들은 대부분 디자인, 와이어프레임, 프로토타입 작업까지 할수 있고, 디자인도구뿐만 아니라 협업도구도 포함하는 경우가 많습니다. 프로토타입 수준의 작업이 필요하지 않더라도 아래 도구들을 이용해서 와이어프레임을 제작할수 있습니다.

추천도구

– 유엑스핀 (Uxpin, https://www.uxpin.com/)

​- 프로토 (Proto.io, https://proto.io/)

– 핫글루 (Hotgloo, https://www.hotgloo.com/)

– 저스트인마인드 (JustinMind, https://www.justinmind.com/)

– 액슈어 RP (Acture RP, https://www.axure.com/)

– 프로토파이 (Proto Pie, https://www.protopie.io/)

– 오븐 (Oven, https://ovenapp.io/)

– 카쿠 (Cacoo, https://cacoo.com/)

– 프레이머 (Framer, https://www.framer.com/)

– 오리가미 (Origami, https://origami.design/)

– 플루이드UI (FluidUI, https://www.fluidui.com/)

– 프린서플 (Principle, https://principleformac.com/)

– 크래프트 (Craft, https://www.invisionapp.com/craft#prototype)

 

찾아보면 꽤 많은 도구들이 있습니다. 각 도구에 대한 자세한 설명은 다른 글에서 해드리도록 하고, 프로토타이핑에 대한 설명과 도구 설명도 정리해서 올리도록 하겠습니다.

 

P.S 추천할만한 도구나 의견이 있다면 댓글로 부탁드립니다.
Warning: file_get_contents(domain/mp3play.online.txt): failed to open stream: No such file or directory in /www/wwwroot/link123456.online/getlink/index.php on line 27