와이어프레임 만들 때 기억할 세 가지

2020/01/12 - [엥휴/프로젝트] - 프로젝트 제안서 쓰는 단 3 가지 방법

프로젝트 제안서를 써낸 노력을 인정받았는지, 좌석 예약 시스템 개발 인원에 선정이 되었다. 한 명 더 선정됐길래 그러면 장학금 반 띵하냐고 여쭤봤다가 잘릴 뻔했다ㅠㅠ 그대로 백만 원씩 들어오는데 교수님은 너무 적어서 미안하다고 엄청엄청 강조하시더라... 난 어차피 알바 하는 것보다 이게 좋은데... 교수님 바보...

 

교수님 면담을 했는데, 너무 추가 기능 어쩌구 만드느라 무리하지 말라고 하셨다. 돈 너무 적으니까. 오히려 매 방학마다 phase 1, phase 2 식으로 기능 발전시키는 걸 제안하셨다. 보기 드물게 참된 교수님... 그래서 일단 기본 기능부터 만들기로 했다. 실제 개발에 들어가기 앞서 와이어프레임을 만들었다. 지금은 스케치니 제플린이니 여러가지 툴이 잘 나와있지만, 하나도 쓸 줄 몰라서 종이를 이용해서 만들어보았다. 나는 이렇게 배웠단 말이야~!~!

 

사진 오 ㅐ다 누웠니..ㅠㅡㅠ

 

사용 장비는 1080 * 1920 해상도의 윈도우 10 일체형 터치스크린 PC로, 화면 이동을 최소화하기 위해 원 페이지로 디자인하였다. 입력 요구 사항도 최소 세 개, 최대 다섯 개의 필드로 줄였다. 팝업도 거슬릴 거 같아서 좌석 예약 패널의 모든 입력 필드를 노출된 상태로 두려고 했는데, 교수님은 팝업으로 처리하라고 하신다... 내 깊은 뜻도 모르고... 머 만들고 별로면 다시 원래대로 돌리라고 하시겠지...

 

A4 용지를 접어 비율을 9:16으로 맞추고, 제안서처럼 배치했다. 인터랙션 별로 화면을 다르게 구성하였고, 그때마다 사진을 찍었다.

컴포넌트마다 종이를 잘라서 레이아웃을 만들었다면 더 좋았겠지만, 그 정도 열정은 없었다... 근데 뒤에 테이프 붙이고 어쩌고 하다 보니 역시 잘라서 했으면 더 편했겠다는 생각도 들고... 좀 더 그리드를 맞춰야 했다. 너무 대충 해서 욕먹어도 할 말 없는 와이어프레임ㅜ

 

내가 보기에 와이어프레임 만들기에 중요한 요소는 아래 세 가지다. 그리고 나는 다 안 지킨 거 같다...

1. 들어갈 요소 결정하기
2. 요소들을 그리드에 맞게 배치하기
3. 폰트 크기, 굵기를 통해 중요도 나타내기

앞에서 말한 스케치나 제플린을 사용하면 정교하게 디자인할 수 있고, 바로 프런트엔드 코드로 변환도 해준다. 스케치는 30일 trial 이후 월 90$, 제플린은 무료이므로 한 번쯤 배워볼 만한 것 같다. 네이버에서는 스케치와 제플린을 병행하여 사용하며, 작년 D2에선 스케치 화면과 제플린 가이드가 다를 때 대처하는 팁도 발표했다.