[Project] 와이어프레임과 기획안 발표, 그리고 피드백 회고
1. 와이어프레임(Wireframe) 짜는 과정 회고
(1) 첫 번째 피드백과 개선
저의 첫 화면들을 백업을 해두지 않아 이미지 파일이 없는점, 우선 양해 부탁드립니다.
저는 흰 배경과 회색조 상자, 그리고 검정색 글씨로만 와이어프레임을 짰습니다.
디자이너 친구가 있다는 생각에 안일하게 해간 것을 딱 들통났습니다.
기획안 완성도가 떨어진다는 피드백과 동시에 디자이너 친구에게 의지하지 말고 그 친구가 놀랄 정도로 스스로 짜보자는 목표를 수립하였습니다.
(2) IA를 바탕으로 와이어프레임 '다시' 만들기 - 왕도는 없다! 한 걸음부터 시작!
초보적인 와이어프레임을 엎고 다시 처음부터 기획을 바탕으로 와이어프레임을 짜기 시작했습니다.
그러나 부딪히 난관이 있었습니다. 바로 머릿속에 있는 것을 눈 앞으로 꺼내는 것이 참으로 어려운 과정이라는 것을 간과한 것입니다.
게다가 피그마를 사용해보는 것이 처음이니 레퍼런스를 찾아보며 하나하나 따라 만들기 시작했습니다.
그러다보니 피그마가 익숙해지기 시작했습니다.
제 기획안 특성상 일러스트 요소가 많이 들어갑니다.
구체적이고 탄탄한 와이어프레임을 짜기 위해 아이콘도 하나하나 그리기 시작했습니다.
아래는 제가 그린 물뿌리개입니다.
사각형과 삼각형으로만 이루어진 아이콘입니다.
사각형(단축키 R)을 누르고, 사각형을 그린 후 radius 값을 주어 모서리를 둥글게 하였습니다.
7개의 사각형과 1개의 삼각형을 배치하여 물뿌리개를 완성한후
command + G 를 눌러 그룹화를 시켜주었습니다.
이런 식으로 큰 틀과 작은 아이콘들까지 완성시켜 나갔습니다.
(3) 80% 완성된 와이어프레임
비록 전문적인 일러스트가 아니어서 조잡할 수는 있지만 화면을 구현할 수 있을 정도로는 80% 나왔습니다.
아래는 제가 구성한 와이어프레임입니다.
2. 기획안 발표와 두 번째 피드백
(1) 기획안 발표 - ppt 준비
기본적으로 발표의 대상을 비즈니스 파트너라 생각하고 청자들을 설득할만한 ppt를 만들기 시작했습니다.
깔끔한 템플릿을 골라둔 후에 IA, 와이어프레임과 링크 임베딩, 향후계획 등을 필수 요소로 배치하여 ppt를 완성시켰습니다.
(2) 두 번째 피드백
아직 완성도가 100%까지는 아닌 것을 또 들통나버렸습니다.
비록 당장 구현을 시작할 수 있더라도, 완성도를 조금 더 높이는 방향으로 가야겠다는 생각이 들었습니다.
또한 제가 계획한 향후 계획들은 백엔드 관점에서의 계획이었습니다.
전체 화면 구성을 먼저 완벽하게 한 후에 백엔드 관점의 계획들을 이행하기로 방향을 바꾸었습니다.
총 목표 개월 수는 1개월로 잡고, 한 달간 개발에만 매진하기로 다짐했습니다.
(3) 감사한 질의응답들
다양한 질문 의견 그리고 피드백을 받았습니다.
좋은 의견들을 취합하여 개선점을 찾았고, 이를 반영하여 재미있는 앱을 만들어나가고자 합니다.
앞으로의 방향들도 잘 지켜봐주시기를 바라며 이만 마무리하겠습니다.
감사합니다.