앱 아이디어 뿌시기
06. 앱 기획 동시에 하기
어도비 XD의 유용한 측면
어도비 XD의 놀라운 장점은 간결하고 일목요연한 스토리보드 작성 기능만이 아니다.
부족하고 다듬어지지 않았던 앱 서비스 기획을 스토리보드에 펼쳐놓기 시작하면서 구체화시켜 나갈 수 있는 기능적인 측면은 더욱 큰 장점이다. 이는 대다수 초보자들이 느낄 수 있는 기획력의 한계를 효과적으로 보완할 수 있다. 모든 기획을 마무리하고 스토리보드 작성에 나설 이유는 없다. 이번 장에서는 어도비 XD를 활용한 예제를 통해 기획을 보완하고 완성도를 높이는 접근 방법을 엿볼 수 있다. 다시 강조한다면 어도비 XD는 적절한 UI 툴일 뿐만 아니라 아이디어를 체계화해 앱 서비스 구현의 개발 단계에 이르도록 유도하는 초보 기획자의 유용한 도구다.
앱 기획의 시작은 떠올려보는 것이다.
예제를 떠올리며 필자는 어도비 XD 학습을 원하는 사용자에게 이미 학습을 끝마친 선행 학습자가 eBOOK을 공유하는 서비스로 설정했다. 그리고 위와 같이 아트보드 6개를 작업창에서 작성했다. 앱의 주 메뉴는 아래와 같이 정했다. 첨부 이미지가 흐리다. 뒤에 또 나온다.
1. 이웃 학습자 : 위치 기반의 주변 학습자를 확인할 수 있는 메뉴다.
2. 공유하기 : eBOOK을 요청한 등록 사용자에게 선행 학습자가 eBOOK을 전달할 수 있다.
3. eBOOK 신청 : 학습이 필요한 사용자가 공유 요청 의사를 등록한다.
4. 마이 페이지 : 프로필과 함께 eBOOK을 전달한 사용자와 학습 후 이를 또다시 전달받은 사용자를 볼 수 있다.
* 앱의 메뉴를 결정하는 좋은 방법은 유사 앱의 기능이나 메뉴를 참고하는 것이다. 서비스하고 싶은 아이디어를 명료하게 표현할 수 있는 UI에 다가서는 방법이다. 모방에서 출발하는 것은 비단 디자인뿐만이 아니다.
로딩 화면
로딩 페이지인 첫 화면은 앱 명칭과 슬로건 및 로고와 함께 앱의 누적 이용자 현황을 보여주는 것으로 배치했다.
비즈니스 아이디어와 서비스 기획에 따라 다양하게 구성할 수 있다. 누적 이용자 숫자가 1~2초 로딩 후 앱의 메인 페이지인 이웃 학습자 페이지로 넘어간다.
*다양한 템플릿의 디자인 요소를 만날 수 있는 웹 서비스를 통해 작업 중 요구되는 디자인 결과물에 빠르게 접근하기 위해 유용한 사이트 정보는 평소 즐겨찾기 한다.
메뉴 구성 및 배치
주메뉴 : 이웃 학습자 > 공유하기 > eBOOK신청 > 마이페이지
주 메뉴는 앱 서비스의 성격에 따라 신중히 정한다.
디자인 요소 배치 전 아트보드의 좌측 끝(<)에서 마우스 왼쪽 버튼을 눌러 가이드 선을 불러낸다. 좌우 여백은 45로 설정했다. 상단 로고 및 검색, 알림 아이콘의 아래 구분선 간격은 위로부터 100이다. 설정은 작업창 우측의 '변형' 메뉴에서 적용하면 된다.
상단 아이콘 및 하단 메뉴 영역은 마우스로 드래그해 영역이 설정되면 작업 창 우측 메뉴에서 '스크롤 시 위치고정'을 각각 선택해 준다. 이는 스토리보드 작성 종료 후 프로토타입 미리보기에서 긴 화면을 위아래로 이동시킬 때 화면에 고정시키기 위함이다. 이후 추가 아트보드 생성은 복사 붙여 넣기를 반복해 생성해 나가면 설정된 값으로 생성된다. 아트보드 바탕 더블클릭 시 사이즈를 늘릴 수 있고 화면을 아래로 길게 편집할 수 있다. 프로토타입 실행 시 길게 편집된 화면은 하단의 위치 고정된 메뉴바 아래로 숨는다.
화면 분할
마이 페이지는 프로필을 확인하는 영역과 eBOOK 공유내역을 확인할 수 있는 영역으로 나눴다.
앱의 주메뉴에 해당하는 각각의 아트보드가 만들어졌다.
아트보드를 추가하면서 기획하던 아이디어의 보완할 부분이나 수정이 필요한 부분의 윤곽도 점차 뚜렷해진다. 기존 기획 중 개선해야 할 사항이나 새롭게 추가할 부분은 검토 시 바로 적용하면 된다. 이 같은 수정을 통해 진척된 사항은 저장을 통해 다음 작업 전까지 유지할 수 있다.
스토리보드에 발을 들였다.
어도비 XD 설치 실행 > 아트보드 사이즈 설정 > 앱 명칭 및 로고 적용 > 주메뉴 적용 > 메뉴별 아트보드 생성
이제 앱 서비스의 구상을 본격적으로 스토리보드에 시각화하고 수정 및 보완하는 과정을 거쳐 개발 전 단계까지의 완성도를 높여 가기 위한 준비가 됐다.
