혼자 앱 개발을 하다 보니 디자인적인 측면에서 한계가 있었습니다.
간단하게 파워포인트로만 UI를 그려보고 개발하고 끝내다 보니 지인들이 화면구성이 아쉽다는 리뷰를 했습니다.
제가 개발한 다다일기는 그냥 앱 출시하고 끝!으로 생각하지 않고 계속해서 업데이트할 생각이어서, 이번 참에 제대로 UI 공부를 해보려고 마음먹었습니다.
하지만 아직까지 UI 관련한 인터넷 강의는 많이 없고, 책도 오래된 것 뿐이여서 일단은 핀터레스트와 같은 사이트에서 올라온 다른 사람들의 UI를 참고하는 수준입니다.
그러면서 이번에 UI 디자이너들이 사용하는 프로토타이핑 툴을 이용해서 본격적으로 다다일기 앱 화면을 구성해봤습니다.
프로토 타이핑 툴은 정말 많지만 저는 그중에 카카오 오븐을 사용했습니다.
이번 포스팅에서는 카카오 오븐을 추천하는 이유와 사용방법을 간단하게 정리했습니다.
1. 카카오 오븐을 추천하는 이유
다다일기는 간단한 어플이어서 화면 간의 이동이 적고, 이벤트는 간단한 클릭이 전부인 어플입니다.
카카오 오븐의 단점으로는 적용 가능한 이벤트가 클릭이 전부라는 점이지만, 저에게는 큰 문제가 되지 않았습니다.
그리고 몇개의 프로젝트를 생성하던 무료로 사용 가능하다는 점이 큰 장점인 것 같습니다.
그리고 조작이 드래그&드롭이 끝이어서 뭐 공부할 필요 없이 바로 사용 가능하다는 점도 큰 장점입니다.
다른 프로토타이핑 툴로 marvel도 사용해봤고 그 툴도 좋지만, 무료 계정으로는 프로젝트를 딱 1개만 생성 가능하고, 다운로드할 수 없어서 새 프로젝트를 생성하기 위해선 이전에 만든 프로젝트를 삭제해야합니다. 그래서 저처럼 소규모의 프로젝트의 무료 프로토타이핑 툴을 찾는다면 카카오 오븐이 알맞을 것 같습니다.
아래는 제가 생성한 카카오오븐 프로젝트입니다.
다다일기 UI를 간단하게 카카오 오븐에서 구성해봤습니다.
장점/단점을 길게 나열하기 보다는 직접 한번 보는게 이해하는데 빠를 것 같아서 첨부했습니다.
아래 캡쳐화면은 제 프로젝트의 첫 화면입니다.
연결된 링크가 있는 영역에 마우스를 올려두면 위와 같이 그 영역에 색이 칠해집니다.
누르면 프로젝트에서 연결한 링크로 이동하게 됩니다.
추가할 수 있는 이벤트는 이렇게 클릭 이벤트가 끝입니다. 제 능력이 조금 부족해서도 있지만, 다른 프로토타이핑 툴과 비교했을 때 진짜 어플처럼 있어보이는(?) 구성을 카카오 오븐만으로 하기는 조금 어렵습니다.
하지만 사용방법이 간단하고, 무료라는 점이 위 두개의 단점을 커버할 수 있었습니다. 해커톤이나 SW 개발 공모전, 1인 앱 개발과 같은 소규모의 간단한 프로젝트에서 카카오오븐을 사용하길 추천합니다.
2. 카카오 오븐 사용 방법
카카오 오븐 사용방법은 굉장히 단순합니다.
프로젝트를 생성 하고 편집 화면에 들어갑니다.
편집기의 오른쪽 바에서 원하는 요소/아이콘/이미지를 드래그&드롭으로 가져옵니다.
클릭 이벤트를 추가하기 위해서는 원하는 요소를 클릭한 후 편집>링크 연결하기에서 연결해줍니다.
URL은 내 프로젝트 내 페이지 또는 외부 URL을 연결할 수 있습니다.
연결하고싶은 페이지를 클릭한 후 적용하기를 누르면 끝입니다.
그냥 이렇게 요소 추가 + 링크 연결만 하면 앱 구성이 끝입니다.
그리고 웹 URL을 지인들에게 보여주고 리뷰를 부탁하면 됩니다.
저는 여러가지 화면 버전을 만들어서 가족들에게 보여주고 제일 괜찮다는 평을 받은 UI로 변경해서 다다일기 업데이트를 진행했습니다.
프로토타이핑 툴을 사용하면 협업하기 좋아서 해커톤/공모전을 나가는 학생들이 꼭 한번 써봤으면 좋겠습니다.
잘못된 내용이 있다면 언제든지 댓글이나 메일로 알려주시면 감사하겠습니다.
이 포스팅이 도움이 되었다면 공감 부탁드립니다.
궁금한 점은 언제든지 댓글 남겨주시면 답변해드리겠습니다:D
'interest > Others' 카테고리의 다른 글
트위치 다시보기 영상 다운로드 (5) | 2020.05.03 |
---|---|
LCK 멀티뷰 (선수 개인화면) 보기 (0) | 2020.04.28 |
주식 자동 거래 시스템 구축 후기 (10) | 2020.04.21 |
주식 자동 거래 시스템 구축 프로젝트 시작 (1) | 2020.04.13 |
예전에 작성한 Django 프로젝트 살리기 - 해결한 에러 정리 (0) | 2020.04.08 |