와이어프레임이란?
•
와이어프레임이란 어떤 프로젝트를 진행할 때 기획 단계에서 작성하게 되는 설계도입니다.
•
와이어프레임에 들어가야 하는 정보들은 다음과 같습니다
1.
화면에 어떤 정보가 나타나야 하는가?
2.
어떤 레이아웃을 가져야 하는가?
3.
어떤 세부 모습이 나타나야 하는가?
4.
어느 부분과 이어지며 어디로 이어져야 하는가?
5.
네비게이션은 적절히 기능하는가?
•
와이어프레임에 대하여 잘 설명하고 있는 블로그 글을 첨부합니다. 꼭 읽어보시길 바랍니다
“와이어 프레임은 뭘 먼저 해야할까?”
1. 과제를 소개하는 문서(팀노션)를 만들어 주세요.
•
팀장/팀원 소개
◦
팀장 1명을 선출합니다. 팀 이름도 정해주세요.
기존에 이미 정해진 팀장과 팀 이름이 있다면 그대로 진행해주세요.
◦
팀 별로 본 과제에 대한 수행 계획을 세웁니다
예시
•
팀 프로젝트 소개
◦
프로젝트 주제와 생각하신 기능들에 대해 간략히 설명해 주세요.
◦
이아웃, 주요 색상, 페이지 구성 및 클릭 시 전환에 대한 내용을 적어주세요.
2. 기초를 먼저 구상해 볼까요?
•
목표
◦
앱의 주요 목표와 사용자에게 어떠한 것을 제공 할 지 정의 해야 합니다.
▪
ex) 사용자가 공용 화장실을 어디서든 찾을 수 있는 지도를 만들었으면 좋겠어!
•
타겟 사용자
◦
타겟 사용자의 연령대, 주요 요구사항, 사용 패턴 등을 파악하여 와이어 프레임에 반영 해주세요.
▪
ex) 야외 활동이 많은 자전거 동호회 사람들이나 요즘 러닝크루가 유행이니 그런 분들에게 맞춰서 설계 했으면 좋겠다.
•
핵심 기능
◦
앱의 주요 기능과 필요한 페이지를 정리 해주세요.
▪
ex) 홈화면 , 검색기능, 지도기능, 현위치 기능, 사용자 프로필
기초 구상이 완료되었다면 체크해봐요! Check List
Check List3. 함께 일 할 툴을 선택해요.
•
와이어 프레임 툴
◦
프로젝트를 시작하기 전, 팀원과 함께 아이디어를 시각적으로 표현할 툴을 선정해주세요.
▪
Figma, Freeform
◦
Figma란?
▪
사용자 인터페이스(UI)와 사용자 경험(UX) 디자인 작업에 널리 사용되고 있어요. 협업 기능이 뛰어나고, 여러 사람이 동시에 디자인을 수정하거나 피드백을 제공할 수 있는 실시간 협업 환경을 제공해요. 디자이너뿐만 아니라 개발자, 마케터, PM 등 다양한 직군에서 사용되고 있어요!
▪
디자이너만 피그마를 보고, 만지는 것이 아니에요! 그런 피그마를 편하게 보고 다룰 수 있어야겠죠?
◦
Freeform이란?
▪
애플에서 제공하는 협업 기반 화이트보드 애플리케이션이에요. 아이디어를 시각적으로 정리하기 편하고 여러사람과 실시간으로 협업할 수 있다는 특징을 가지고 있어요. 주로 브레인스토밍, 기획, 스케치 등에 활용되고 있어요!
▪
팀원 모두 Mac, iPad, iOS 환경에 익숙하다면 사용해보기 좋은 툴이에요.
•
협업 툴
◦
우리는 함께 프로젝트를 진행함으로 서로 소통과 자료를 공유할 툴을 선정해주세요.
▪
Slack, Notion
◦
Slack 이란?
▪
팀 간의 소통을 원활하게 하는 실시간 메시징 플랫폼이에요. 팀원과 함께 채널을 통해 대화를 할 수 있고, 파일 공유 및 화상통화를 통해 업무 효율성을 높일 수 있고, 프로젝트 진행 상황을 공유하고 피드백을 주고받는 데 유용한 도구에요!
◦
Notion 이란?
▪
모든 정보를 한 곳에서 관리할 수 있는 협업 툴이에요. 문서 작성, DB, 프로젝트 관리 등 다양한 기능을 지원하여 팀원 간의 협업을 효율적으로 할 수 있게 도와줘요. 사용자 맞춤형으로 커스터마이징이 가능하고, 실시간으로 팀원과 협력 할 수 있는 장점이 있어요!
•
프로젝트 관리 도구(선택 사항)
◦
서로의 작업 현황을 체크하며 일정을 공유할수 있는 협업 툴을 선정해주세요.
▪
Jira, Trello
◦
Jira 란?
▪
주로 소프트웨어 개발 팀에서 복잡한 프로젝트를 관리할 때 널리 사용되는 도구에요. 애자일(Agile) 방식에 최적화되어 있어, 스크럼과 칸반 보드를 통해 이슈를 체계적으로 관리하고, 팀원들이 효율적으로 협업할 수 있도록 돕죠.
▪
Jira는 버그나 기능 요청 등 다양한 작업 항목을 생성하고 추적할 수 있어, 프로젝트가 계획대로 잘 진행되는지 한눈에 파악할 수 있어요!
◦
Trello 란?
▪
간단하고 직관적인 프로젝트 관리 도구로, 시각적인 칸반 보드를 통해 작업 상태를 한눈에 확인할 수 있어요. ‘To Do’, ‘In Progress’, ‘Done’처럼 단순한 워크플로우를 통해 작업을 쉽게 나눌 수 있고, 각 작업 카드에 라벨, 체크리스트 등을 추가해 세부 내용을 관리할 수 있답니다.
▪
개발팀뿐만 아니라 마케터, 디자이너, 비개발 팀에서도 널리 쓰이며, 파워업 기능으로 캘린더 같은 다양한 추가 기능을 활성화할 수 있어요!
4. 본격적으로 작업을 해볼까요?
•
화면 스케치
◦
앱 주요 화면을 스케치 하여 구조를 파악해주세요.
노트와 펜으로 머리 속에 있는 지식을 간단하게 그려보시는 것 부터 시작해보아요!
예제
•
UI요소 배치
◦
각 화면에 포함될 UI 요소를 나열하고 배치를 계획해보아요.
◦
버튼은 어디로 가야하는지, 상단바는 어떤 정보를 가지고 있어야하는지 등을 생각하며 구성해요.
예제
•
사용자 플로우 설계
◦
사용자 플로우를 정의 하여 사용자 경험을 매끄럽게 만들거에요.
◦
사용자가 어떤 흐름으로 우리의 앱을 사용했으면 하는지를 먼저 생각해주세요. 이후 그 흐름이 어색하지는 않을지, 사용자의 편리성을 고려한 것인지도 함께 생각해주세요.
▪
홈화면 → 지도 검색 → 위치 보기
예제
•
인터렉션 요소
◦
체이지 전환과 같은 기본 인터랙션을 정의해주세요.
예제
5. 피드백을 받아봅시다!
•
완성 후 피드백을 받아주세요
◦
피드백은 우리팀 모두가 기획자, 디자이너, 개발자가 되었다고 생각하고 각각의 관점에서 남겨주세요.
◦
피드백을 남겼다면 해당 피드백을 받아 개선해요.
◦
위의 일련의 과정을 꼭 문서화해주세요.
▪
ex) Ver.0.0.0.1 → Ver.0.0.0.2
예제 멘트
6. 마지막으로 검토하고 제출해볼까요?
•
계획과의 일치 확인해주세요.
◦
원하는 방향대로 와이어프레임이 완성되었는지 검토해주세요.
•
아래의 항목이 모두 작성/구현되었는지 마지막 체크해주세요!
팀장과 팀원에 대한 소개가 잘 작성되어 있나요?
어떤 툴을 사용했는지 작성되어있나요?
화면에 나타날 정보가 모두 나타났나요?
한 눈에 레이아웃을 확인 할 수 있나요?
어느 부분에서 어느 부분과 이어지는지 명확하게 확인 할 수 있나요?
기획/개발/디자이너의 역할에서 피드백을 주고 받았으며 피드백이 작성되어있나요?
여러분의 개성을 마음껏 펼쳤나요?
•
10/16(수) 최고의 와이어 프레임을 뽑는 이벤트가 진행될 예정입니다.
◦
수상을 한 팀에게는 소정의 선물을 지급해드릴 예정입니다.
우리 함께 익숙해 져봐요 와이어프레임
•
천천히, 점차 성장하는 과정의 중요성!
◦
처음부터 완벽하기는 어려워요. 이번 와이어프레임 작업을 통해 얻은 협업 경험과 여러 협업툴을 통해 여러분들은 한 단계 더 성장하셨을거에요
◦
이번 작업이 어려웠다면, 자연스러운 성장과정으로 자신감을 가져주세요.
◦
실수, 실패를 두려워하지 말고 앞으로 더 좋은 경험과 개발지식을 함께 쌓아가요.
중요한 건 여러분이 시도했고, 한 발자국 나아갔다는 사실이라는 것을 명심하기!
•
공부하는 것을 잘 정리해서 기록
◦
와이어 프레임을 잘 작성한것으로 끝이 아닌 여러분의 기록이 중요합니다!
◦
여러분이 어떻게 진행을 했는지 TIL을 쓰며 기록으로 남겨 자신의 것으로 만들어 보아요
