부록

BUJA
최린아, 이혜인, 김희재
- 부록 -

목차
1
2
3
4
5
6
7
벤치마킹
사용자 리서치
와이어프레임 (초반)
2016 GUI 디자인 트렌드
벤치마킹_ 앱 디자인
기타 디자인 레퍼런스
캐릭터 디자인

1) 주머니 지킴이
총 자산, 한달 목표 지출액, 절약목표를 입력하면
한 달 뒤에 성공 또는 실패 결과를 받을 수 있음.
(1) 지출을 분야별로 추가하고 통계를 볼 수 있음
(2) 돈이 별로 없는 학생들도 목표를 잡고 합리적 소비 가능
(1) 시간 단위가 한 달밖에 없고 임의로 변경이 불가
(2) 수입을 입력할 때 용돈, 월급 등 분야가 안 나뉘어 있는 점
(3) 통계가 시각화되어있지 않아 전체적인 흐름을 한 눈에 파악하기 어려움
(4) 한 달 디데익 끝나야만 통계를 확인할 수 있고 중간엔 확인할 수 없음
(5) 어플을 실행하면 무조건 시작하기 버튼이 있는 홈 화면이 나옴
(6) 푸쉬 알람이나 위젯 기능이 없음
(7) 매달 총 지출만 확인 가능하고 수입은 확인 불가능한 점
(8) 카드 문자서비스와 연동되지 않아 일일이 숫자를 입력해야 함
(9) 수입기록이 없어 확인할 수 없음
(10) 화폐 단위가 원으로 한정되어있어 외국 거주 한국인이 사용 불가
(11) 지출 통계 항목을 추가할 수 없음
장점
단점
소개
1 벤치마킹

2) 스마트 용돈기입장
수입을 기록하면 ‘남은 돈’이 쌓이고, ‘남은 돈’ 안에서 지출을 기록함.
일간, 주간, 월간, 년간, 전일대비 기록 등으로 체계적으로 돈을 관리할 수 있음.
(1) 기록 저장 기능으로 PC에 백업해둔다면 자료가 날아가도 복구할 수 있음
(2) Q&A 메뉴가 있어 사용법을 쉽게 확인할 수 있음
(3) 돈 단위 설정, 잠금 설정, 폰트 설정 등 사용자의 자율성이 높음
(4) 카드 문자서비스와 연동되어 문자가 오면 가계부에 자동 기록됨
(1) 전일대비 기능이 상대적 기준이기 때문에 유용하지 않을 수 있고,
임의로 기능 사용 여부를 설정할 수 없어서 불편함
(2) 통계가 시각화되어있지 않아 전체적인 흐름을 한 눈에 파악하기 어려움
(3) 목표금액을 작성할 수 없음
장점
단점
소개
1 벤치마킹

3) 100억 가계부
지출, 수입 관리는 물론이고, 구글드라이브 연동을 통해 안전한 데이터 관리 가능.
위젯, 메모, 분석차트까지 지원하기때문에 복잡한 가계부도 깔끔하게 정리할 수 있음.
(1) 카드 문자 서비스와 연동해 지출내역에 자동으로 가계부에 기록됨
(2) 튜토리얼 기능으로 쉽게 사용법을 숙지할 수 있음
(3) 통계를 그래프로 시각화해 쉽게 수입 및 지출기록을 확인할 수 있음
(4) 구글드라이브, 엑셀과 연동되어 PC와 스마트폰을 오가며 편리하게 관리할 수 있음
(1) 화폐 단위를 변경하거나 소수점을 입력하는 기능이 없음
(2) 입, 출금 색상이 은행 앱과 반대여서 헷갈림
장점
단점
소개
1 벤치마킹

4) 만원으로 일주일 나기
일주일의 도전기간 안에 사용할 금액을 설정하면
기간이 끝난 후 성공 또는 실패 결과를 얻을 수 있음.
(1) 지금까지의 도전 기록 목록을 확인할 수 있음
(2) 카테고리별로 지출을 입력해 어떤 항목에 소비했는 지 확인할 수 있음
(1) 시간 단위가 무조건 일주일만 가능하고 변경이 불가능
(2) 지출 카테고리를 임의로 추가할 수 없음
(3) 통계나 그래프가 제공되지 않아 지출 패턴을 분석할 수 없음
(4) 남은 시간이 초단위이기 때문에 몇 일, 몇 시간 남았는지 파악하기 어려움
단점
장점
소개
1 벤치마킹

5) 깔끔 가계부
월급, 용돈 등의 반복 데이터를 입력하면 매달 자동으로 정보가 입력됨.
또 나의 소비습관을 분석해주는 분석그래프를 통해 합리적인 경제생활에 도움을 줌.
(1) 수입, 지출, 저축을 깔끔한 아이콘과 함께 편리하게 입력할 수 있음
(2) 월별 통계와 그래프를 제공해 합리적인 경제생활을 도와줌
(1) 카드 문자서비스와 연동되지 않아 일일이 금액을 입력해야 함
(2) 통계 그래프가 막대그래프로 되어 있어 꺾은선그래프보다
한 눈에 흐름을 파악하기가 어려움
(3) 너무 컬러풀한 색상이 오히려 정보전달에 방해가 될 수 있음 (그래프, 아이콘 등)
장점
단점
소개
1 벤치마킹

6) 용돈인생
여러 카드를 한 번에 등록할 수 있고, 현금 및 은행계좌까지 관리할 수 있음.
파이 그래프로 카드 사용 통계 기능을 제공함.
(1) 체크카드, 신용카드가 연동되고, 무이자 할부까지도 입력됨
(2) 모든 카드, 최근 1개월 등의 카드 사용 통계 그래프를 확인할 수 있음
(1) 제작자의 휴대폰 상단 바가 남아있어 완성도가 낮음
(2) 기능을 한 눈에 알아보기 어려운 디자인
장점
단점
소개
1 벤치마킹

7) Where is my money?
수입은 고정되어 있는데 지출변동이 심한 사람들을 위해
지출기록만으로 자신의 소비기록을 손쉽게 확인할 수 있는 앱.
(1) 여러가지 언어를 제공해줘 다양한 나라 사람들이 사용할 수 있음
(2) 지출 카테고리별로 매달 통계 그래프를 제공함
(1) 카드 문자서비스와 연동되어있지 않아 일일이 금액을 입력해야 함
(2) 한글버전을 선택해도 영어와 섞여있어 불편함
장점
단점
소개
1 벤치마킹

8) 꿀꿀이 가계부
일반적인 용돈관리어플처럼 수입, 지출을 입력할 수 있을 뿐만 아니라
통장자동이체, 빌려준 돈 관리 등 다양한 자산을 관리할 수 있음.
(1) 자기가 쓴 사용내역조회를 일반조회, 달력조회, 검색조회로 확인할 수 있음
(2) 문자서비스와 연동되어 있음
(3) 날짜를 자유롭게 조정할 수 있음
(1) 담고있는 많은 내용들이 첫 화면에 모두 포함되어 한 눈에 보기 어려움
(2) 재미요소가 부족함
장점
단점
소개
1 벤치마킹

9) 간편한 용돈기입장
심플하게 수입과 지출을 표기하고 한 눈에 볼 수 있게 해줌.
복잡한 가계부 어플이 필요없는 사람에게 유용한 앱.
(1) 간단한 기능으로 매우 간편하게 사용할 수 있음
(2) 메인 화면에서 남은 돈 내역으 전부 확인할 수 있음
(1) 카드 문자서비스와 연동되지 않아 일일이 금액을 입력해야 함
(2) 기능이 너무 심플해 세세한 관리가 어려움
장점
단점
소개
1 벤치마킹

10) Pocket money 용돈기입장
편하게 용돈을 관리할 수 있는 용돈기입장 어플.
수입, 지출 내역, 빌려준 돈, 맡긴 돈까지 따로 관리할 수 있음.
(1) 빌려준 돈, 맡긴 돈을 따로 관리하고 맡긴 돈 기능에서 사인을 받을 수 있음
(2) 대화형식으로 입금, 지출을 확인 할 수 있음
(3) 영수증 사진을 첨부할 수 있음
(4) 한 달 사용내역을 간편하게 그래프로 확인할 수 있음
(5) 비밀번호 잠금 기능이 있어 나만 확인할 수 있음
(6) 식비, 교통비, 용돈 등으로 지출을 분류할 수 있음
(1) 지출내역마다 메모를 쓸 수 있는 칸이 없음
(2) 수입, 지출 그래프가 있지만 분석해주지 않음
장점
단점
소개
1 벤치마킹

11) 돈버는 가계부
재산 지출과 자산을 한 눈에 볼 수 있는 가계부.
통계청과 비교하여 나의 현재 상황을 한 눈에 알 수 있음.
(1) 카드 문자 서비스와 연동해 지출내역에 자동으로 가계부에 기록됨
(2) 내 지출 수준을 통계청과 비교 할 수 있음
(3) 대시보드형, 캘린더형, 일자별 자산보기를 통해 내 자산내역을 한 눈에 볼 수 있음
(4) 여러 사람의 지출내역을 하나의 가계부로 모아 쓸 수 있음
- 부부형 : 두 사람의 지출내역을 하나의 가계부로 모아 함께 관리할 수 있음
- 동호회형 : 모임의 총무가 사용한 지출 내역을 다른 멤버들이 확인할 수 있음
(5) 은행 입출금 내역과 카드별 결제 내역을 업종별로 분류해 저장해줌
(6) 통장 잔액이 자동으로 처리되어 위젯으로 알려줌
(1) 본인 통장이 여러개인 경우, 자신의 다른 통장으로 입금할 때는
따로 설정을 해줘야함. (입금통장, 출금통장으로)
(2) 입금 날짜를 변경하면 지금까지 입금 입력을 해왔던 모든 날짜가
변경한 날짜로 변경됨.
(3) SNS 가져오기가 자동설정되고 수정할 수 없어 SNS가 중복되는 일이 발생함
장점
단점
소개
1 벤치마킹

12) 편한가계부
카드 문자서비스와 연동해 사용내역이 가계부에 자동입력되는 간편한 가계부 어플.
소개
(1) SMS 카드자동등록 가계부 설정 가능
(2) 음성으로 입력하는 가계부 설정 가능
(3) PC 가계부 설정 가능
(4) Excel, txt 파일 내보내기 가능
(5) 통계 요약 및 그래프 설정 가능
(6) 월별 예산 설정 가능
(1) 결산 주기를 설정할 수 없음 (일주일, 한 달 기준만 가능)
장점
단점
1 벤치마킹

13) 남은돈체크
간단한 UI와 깔끔한 디자인의 용돈기입장 어플.
돈을 쓸수록 카드 일러스트가 줄어드는 재미요소를 넣은 게 특징.
소개
1) 남은금액을 실시간으로 확인할 수 있음
2) 위젯으로 간단하게 현재 상태를 확인 할 수 있음
3) 일일 권장 소비금액을 표시해줌
4) 돈을 쓸수록 지폐가 줄어드는 재미 요소를 넣음
5) 디자인이 깔끔함
6) 하루 권장 소비금액을 제공함
7) 기간을 설정할 수있음
1) 구체적으로 기입할 수 있는 메모란이 없음
2) 주기설정을 한번 설정하면 바꿀 수 없음
3) 지출 분야를 설정할 수 없음
4) 주기적인 수입금 이외에 새로운 수입금을 기록할 수 없음
장점
단점
1 벤치마킹

14) 편의점 할인 정보 모음
모든 편의점 별 할인카드 및 맴버쉽을 확인 가능한 어플.
각 편의점의 1+1 혹은 2+1 행사들의 목록을 한 눈에 볼 수 있도록 함.
(1) ‘톡톡’이라는 어플 내 커뮤니티가 있음
(2) 각 편의점의 할인과 이벤트들을 모아서 볼 수 있음
(1) 검색기능이 없어서 내가 원하는 정보를 빠르게 찾을 수 없음
(2) 등록되어있는 네 개의 편의점만 볼 수 있음
(3) 할인정보를 확인만 할 수 있고 찜하기와 같은 다른 기능이 없음
장점
단점
소개
1 벤치마킹

15) 피키캐스트 - 돈월이 에디터
매주 올라오는 세일 정보를 확일 할 수 있는 어플.
다양한 카테고리가 한 번에 올라오기 때문에 다양한 할인 정보를 볼 수 있음.
(1) 더 자세한 정보를 얻을 수 있는 링크가 있음
(2) 에디터가 카테고리를 나눠서 순서대로 정렬되어있음
(3) 출처 링크를 클릭하면 더 자세한 사항을 확인 할 수 있음.
(1) 에디터의 글이기 때문에 검색할 수 없음
(2) 이미 지난 세일의 글이 없어지지 않고 남아있음
(3) 내가 보고싶은 정보가 있는지 글을 전부 읽어야 확인할 수 있음
장점
단점
소개
1 벤치마킹

16) 위픽
뷰티, 음식 관련 이벤트, 할인 쿠폰이 있는 어플.
다양한 카테고리의 가격할인 정보를 볼 수 있음.
(1) 카테고리가 분류되어 있어, 각각의 앱을 따로 받지 않아도 됨
(2) 할인정보와 더불어 쿠폰도 받을 수 있음
(3) 각각의 홈페이지 바로가기 링크가 있어 더 자세한 정보를 알기 쉬움
(4) 카테고리별로 분류가 잘 되어있음
(5) 각 브랜드별 바로가기 카테고리가 있음
(1) 선별된 집단의 할인정보만 알 수 있음
(2) 검색기능이 없음
장점
단점
소개
1 벤치마킹

17) 세일투나잇
호텔, 여행, 외식, 영화, 뷰티등의 타임커머스를 종합해놓은 어플.
해외 숙박 정보도 있어서 해외에서도 사용 가능함.
소개
(1) 정보확인뿐만 아니라 바로 결제까지 할 수 있음.
(2) 여러종류의 카테고리가 함께 있음
(3) 해외 숙박 정보도 있어 해외에서도 사용 가능함
(4) 실시간 당일 예약이 가능함
(1) 지역이 도 단위 까지만 구분되어 있음
장점
단점
1 벤치마킹

18) 화장품 샘플조아 무료샘플
화장품 할인, 무료 샘플, 추천 정보 제공 어플.
소개
(1) 공유기능과 알림기능이 활성화 되어 있음
(2) 선택 알림 기능
(3) 화장품 로드샵 할인/세일 정보 제공브랜드 리스트 제공.
(4) 화장품 무료샘플 정보 제공 브랜드 리스트 제공.
(1) 브랜드 검색기능이 없음
장점
단점
1 벤치마킹

19) 브랜드모아
소셜커머스와 오픈마켓에 뜬 특가 상품들을 모아서 확인할 수 있는 어플.
소개
(1) 소셜 커머스를 종합적으로 볼 수 있음
(2) 브랜드명 검색 외에도 브랜드의 상품까지 검색할 수 있음
(3) 상품의 카테고리별로 할인 상품 정보를 확인할 수 있음
(1) 한정된 브랜드와 상품만을 검색할 수 있음
장점
단점
1 벤치마킹

20) 득템
깔끔하게 카테고리별로 정리된 세일/할인정보 실시간 조회 어플.
신세계몰, 롯데아이몰, Hmall, 디앤샵 등 국내 유수 쇼핑몰들의
세일/이벤트 정보를 한 눈에 확인가능.
소개
(1) 원하는 브랜드를 찾아서 실시간 할인정보를 알 수 있음
(2) 앱상에서 커뮤니티 게시판 글쓰기 가능
(1) 메뉴에서 선택가능한 항목이 적어 불편함
(2) 앱 다운 후 실행되지 않음
장점
단점
1 벤치마킹

21) 트리바고
현재 위치에서 가장 가까운 호텔을 찾고 통합 지도를 이용해서 바로 찾아갈 수 있는 어플.
같은 호텔의 최저가를 보여줘서 보다 절약 할 수 있게 도와줌.
소개
(1) 호텔 후기, 평점, 사진 등 다양한 정보를 제공
(2) 가격, 호텔등급, 거리 등의 다양한 검색조건을 이용해서 호텔을 찾을 수 있음
(3) 깔끔한 디자인과 인터페이스로 앱을 쉽게 이용할 수 있음
(4) 앱에서 바로 호텔로 전화할 수 있음
(1) 몇 퍼센트 할인되는지에 대한 정보가 없음
장점
단점
1 벤치마킹

22) syrup
카드와 앱을 연동해서 쉽게 결제하고 포인트도 쌓을 수 있게 해주고,
할인 혜택 정보도 실시간으로 알려주는 어플
소개
(1) 내 카드와 내 쿠폰에 해당되는 이벤트 확인 가능
(2) 생활 혜택을 한 눈에 볼 수 있음
(3) 실시간으로 주변 혜택 찾기 가능
(1) 배터리 소모가 심함
(2) 위치제공 서비스에 강제동의 해야함.
장점
단점
1 벤치마킹

: 2x2 다이어그램 (자산관리 앱)
수동적 능동적
재미요소가
없음
재미요소가
있음
1 벤치마킹

: 니즈지원표 - 앱에 필요하다고 생각되는 기능들을 경쟁사와 비교분석
주머니 지킴이
스마트
용돈기입장
깔끔가계부
100억
가계부
만원으로
일주일나기
용돈인생
Where is
my money
간편용돈
기입장
꿀꿀이가계부니즈(Needs)
하루동안 쓸 수 있는
돈을 알려주는가?
카드 연동이 되는가?
나의 수입/지출 내역을
분석해주는가?
분석 내역을
시각화하는가?
스토리가 있는가?
poket money
용돈기입장
돈버는 가계부
절약에 도움이 되는
기능이 있는가?
O
O
O
O
OO
O O
O
OO
O
X
X
X X
X
X
X X
X
X X
X
X
X
X
X X X X X X X
X X X X
X
X X
X
XX
O
O
O
O
O O
O O
O
O
O O
O O
O
O
O
O
O
O
XX
X
X
편한가계부 남은돈 체크
X X X
X
X
X
X
1 벤치마킹

: 니즈지원표 - 앱에 필요하다고 생각되는 기능들을 경쟁사와 비교분석
O O O O O
O
O
O
O
O
O O
OO
O O
O
O
X
X
X X
X X
X
X
X X
X
X
카테고리가
다양한가?
검색기능이
있는가?
사용자 맞춤정보를
제공하는가?
니즈(Needs)
편의점 할인
정보 모음
피키케스트
돈월이 에디터
CLIP 위픽 세일투나잇
화장품 샘플조아
무료샘플
브랜드 모아득템트리바고 시럽
1 벤치마킹

2. 사용자 리서치
유저 다이어리 & 추가인터뷰 (6명)

위의 불편한 점을 개선하기 위해 어떤 방안이 필요하다고 생각하시나요?
당신을 소개해주세요.
이름 : 나이 :
직업 : 한달 고정수입 :
대학생이 된 이후 용돈기입장 또는 용돈기입장 앱을 사용해본 적이
있다면 불편한 점이 있었나요? 있었다면 어떤 점이 불편했나요?
돈을 관리해주는 비서가 있다면 어떤 일을 시키고 싶으신가요?
어떤 일이든 시켜만 주세요! 저는 당신만을 위한 비서니까요!
2 사용자 리서치
- 유저 다이어리 (포맷)

돈에 대한 당신의 뇌구조를 자유롭게 그려주세요!
만약 당신이 2주 동안 단돈 3만원만 사용해야 한다면 어떤 방법으로
돈을 아끼실 건가요? 당신의 대처 방안을 알려주세요.
(단, 2주 동안 알바 등으로 수입을 얻을 수도, 누군가에게 도움을 청할 수도 없습니다.)

12 1 2 3 4 5 6 7 8 9 10 11 12
위치
AM.
행동
만난 사람
지출 금액
지출 항목
지출 방법
지출 이유
지출 시 표정
감정, 심정
좋음
나쁨
기분그래프
나의 지출 평가
합리적인가요?

오늘의 돈 관리에 대해 칭찬할 점이 있나요? 있다면 작성해주세요!
오늘의 돈 관리에 대해 반성할 점이 있나요? 있다면 작성해주세요!

이름 : 곽현우
나이 : 27
직업 : 대학생
한달 고정수입 : 40
이름 : 양승은
나이 : 23
직업 : 대학생
이름 : 방환영
나이 : 25
직업 : 대학생
이름 : 이수연
나이 : 22
직업 : 대학생
이름 : 최수빈
나이 : 23
직업 : 대학생
한달 고정수입 : 0~40
이름 : 김은지
나이 : 23
직업 : 대학생
2 사용자 리서치 - 유저 다이어리 (타겟 조사)

곽현우(27,남)
(1)유저다이어리 원본2 사용자 리서치 - 유저 다이어리 (타겟 조사)

곽현우(27,남)
(2)유저다이어리 타이핑2 사용자 리서치 - 유저 다이어리 (타겟 조사)

곽현우(27,남)
(3)추가인터뷰 타이핑2 사용자 리서치 - 유저 다이어리 (타겟 조사)

곽현우(27,남)
(4) 저니맵(Journey map) 정리2 사용자 리서치 - 유저 다이어리 (타겟 조사)

곽현우(27,남)
(5)추가인터뷰 정리2 사용자 리서치 - 유저 다이어리 (타겟 조사)

양승은(23,여)

김은지(23,여)

방환영(25,남)

이수연(22,여)

최수빈(23,여)

(6) 유저 다이어리 정리2 사용자 리서치 - 유저 다이어리 (타겟 조사)

1) 메인화면 (메인)
3 와이어프레임 (초반)
가장 필요한 정보를 한 눈에 보기 쉽게
정리한 메인 페이지.
1
1 메뉴 버튼
메뉴 버튼을 누르면 메뉴 바가 나타난다.
(시뮬레이션/저축/수입지출관리/할인정보/사용자설정)
2 도전 종료 디데이 현재 날짜부터 도전 종료일까지 며칠 남았는지 알려준다.
3 날짜, 기간 현재날짜, 도전기간을 알려준다.
4 현금입력
현금입력 버튼을 누르면
현금입력 창이 뜬다.
현금입력 창에서는 수입,
지출, 금액, 분야를 선택할
수 있다. 입력을 완료하면
수입/지출관리에 현금
내역이 자동 입력된다.
2
4
3

1) 메인화면 (메인)
가장 필요한 정보를 한 눈에 보기 쉽게
정리한 메인 페이지.
5 오늘 사용한 금액
오늘 하루 총 사용한 금액을 알려준다.
5~9번 중 어디를 클릭해도 오늘의
분석 그래프 화면으로 이동한다.
6 오늘 사용가능 금액 오늘 하루 쓸 수 있는 돈이 얼마인지 알려준다.
7 전체 사용가능 금액 현재 도전기간 내에 남은 금액 총액을 알려준다.
8 거지 캐릭터
현재 도전기간에 살려야 하는 거지 캐릭터다.
캐릭터를 클릭하면 캐릭터 프로필 화면으로 이동한다.
도전기간을 설정하지 않았을 경우 캐릭터는 뜨지 않는다.
9 소비습관 문제점
최근 수입, 지출 내역 분석을 토대로 한
최근 나의 소비습관 문제점을 알려준다.
10 시뮬레이션 시뮬레이션 페이지로 바로 이동할 수 있는 버튼이다.
11 나의 수입 지출 수입/지출 페이지로 바로 이동할 수 있는 버튼이다.
5
6
7
1110
8
9

1) 메인화면 (메뉴)
1
3 4
2
1 도전설정 도전설정 메인 페이지로 이동한다.
2 나의 거지보기 나의 거지보기 페이지로 이동한다.
3 저축 저축 페이지로 이동한다.
4 사용자 설정 사용자설정 메인 페이지로 이동한다.
상단 바의 메뉴 아이콘을
클릭하면 나오는 메뉴 바 페이지.

2) 거지 캐릭터 (메인)
1 거지 이름
기본적으로 랜덤으로 주어지지만 변경을 원하면
클릭해서 이름을 자유롭게 바꿀 수 있다.
2 거지 기간 해당 거지와 함께한지 며칠이 지났는지 알려준다.
3 도전 현황 기간 내 현재까지 사용한 금액과 목표금액을 알려준다.
4 분석 그래프 분석 그래프 페이지로 이동한다.
5 상태 해당 거지의 상태(진행중/생존/사망)가 표시된다.
6 캐릭터 해당 거지 캐릭터가 표시된다.
7 도전기간 해당 거지의 도전기간을 알려준다.
8 성격
해당 거지의 성격이다.
도전을 시작할 때 랜덤으로 배정된 성격이 표시된다.
9 취미
해당 거지의 취미다.
도전을 시작할 때 랜덤으로 배정된 취미가 표시된다.
메뉴 바에서 나의 거지 보기 버튼을
클릭했을 때 나오는 페이지.
1
2
3
4 5
6
7
8
9

10 선물목록
해당 거지에게서 받은 선물목록을 확인할 수 있다.
선물은 하루 지출액이 하루 사용가능 금액의 절반 이하일 때
거지에게서 획득할 수 있다. 선물목록을 클릭하면 선물의
정보를 확인할 수 있다.
11 도움말
물음표를 누르면 선물이
무엇인지 설명이 나온다.
12 전체 거지 목록
지금까지 만난 거지들의
목록을 확인할 수 있다.
이름, 상태, 생김새, 기간 정보가
제공되고 클릭하면 선택한 거지의
프로필 화면으로 이동한다.
13 전체 선물 목록
지금까지 받은 전체 선물 목록 및 정보를 확인할 수 있다.
선물목록을 클릭하면 선물의 정보를 확인할 수 있다.
10 11
12 13
메뉴 바에서 나의 거지 보기 버튼을
클릭했을 때 나오는 페이지.

1 이름 입력 거지 이름을 입력해 지난 거지를 검색할 수 있다.
2 거지 생존률 전체 거지 생존률을 알려준다.
3 정렬 최신/오래된/이름순으로 거지 목록을 정렬할 수 있다.
4 거지 목록
거지 이름, 진행/생존/사망 현황, 생김새, 도전 기간 정보
를 나열해서 보여준다.
나의 거지 보기 메인 화면에서 전체
거지 목록을 클릭했을 때 나오는 페이지.
1
2 3
4

3) 나의 수입, 지출 (메인 - 일반형)
나의 수입, 지출 메인 페이지.
수입과 지출에 대하여 확인할 수 있음.
1 전체보기
나의 수입, 지출 전체를 본다는 것을 나타내면서,
페이지 네비게이터의 제목 역할을 하기도 한다.
2 일반형 수입, 지출을 일반형을 볼 때, 표 형식으로 확인할 수 있다.
3 날짜
날짜를 클릭하면 그날의 전체 수입과 지출을
확인 할 수 있다.
4 수입 수입 전체를 확인할 수 있다.
5 지출 지출 전체를 확인할 수 있다.
6
페이지
네비게이터
전체보기, 카드 및 통장보기, 현금보기
중 어느 페이지를보고는지 알려준다.
2
3 4 5
6
1

3) 나의 수입, 지출 (메인(일반형) - 수입/지출 클릭)
1 날짜 클릭
일반형의 표에서 수입을 선택하면 수입 페이지,
지출을 선택하면 지출 페이지가 나타난다.
2 표
표에는 선택한 날짜에 시간별로 지출과 수입이 함께
나타난다. 오늘 날짜의 표가 가장 처음 화면에 나타나지만,
드래그해서 다른 날의 표도 확인할 수 있다.
3
페이지
네비게이터
전체 보기 페이지에서 날짜를
클릭해야지만 전체 수입, 지출을
볼 수 있다. 카드와 통장, 현금의
수입지출이 전부 합쳐진 금액을
확인 할 수 있다.
하루의 수입, 지출을 알 수 있는 페이지.
1
2
3

1 수입 클릭 일반형의 표에서 수입을 선택하면 수입 페이지가 나타난다.
2 표
표에서는 시간별로 수입을 확인 할 수 있다. 수입에는
금액과 수단, 메모가 있다.
3 메모
메모를 선택하면 메모할 수 있는
칸이 생긴다. 글을 쓰고 다시 메모를
선택하면 칸이 줄어든다.
4
페이지
네비게이터
카드와 통장, 현금을 표함한
수입을 확인할 수 있는
페이지라는 것을 알려준다.
1
2
3
4

1 지출 클릭 일반형의 표에서 지출을 선택하면 지출 페이지가 나타난다.
2 표
표에서는 시간별로 지출을 확인 할 수 있다. 지출에는
금액과 분야, 수단, 메모가 있다.
3 메모
메모를 선택하면 메모할 수 있는
칸이 생긴다. 글을 쓰고 다시 메모를
선택하면 칸이 줄어든다.
4
페이지
네비게이터
카드와 통장, 현금을 표함한
지출을 확인할 수 있는
페이지라는 것을 알려준다.
1
2
3
4

3) 나의 수입, 지출 (달력형)
1 전체보기 나의 수입, 지출 전체를 본다는 것을 나타낸다.
2 달력형
수입, 지출을 달력형으로 볼 수 있다.
달력안에 있는 날짜를 클릭하면
3 기간별 보기
기간별 보기를 선택하면 달력에
내가 지정한 기간이 색깔로 표시된다.
그 중에 내가 확인하고 싶은 기간을
선택할 수 있고, 선택 후 총수입,
총지출 금액이 기간에 맞춰 나타난다.
4 분석하기
분석하기 버튼으로,
버튼을 클릭하면
나의 지출을 분석해
시각화해준다.
5 금액 확인 나의 한 달 동안의 총 수입, 총 지출, 잔액을 알려준다.
6
페이지
네이게이터
카드와 통장, 현금을 합친 수입, 지출을 확인
할 수 있는 페이지다.
메인화면에서 달력형을 누르면 나오는 페이지.
달력형태로 나의 수입, 지출을 확인 가능.
1
4
5
2
3
6

4) 저축 (메인)
1 저축 이름 내가 만든 저축목록의 이름을 볼 수 있다.
2 지금까지 저축된 금액 지금까지 저축을 얼마나 했는지 축적금액을 볼 수 있다.
3 종료
저축 설정에서 목표기간과 목표금액을 선택할 수 있다.
목표기간이 지나거나, 목표금액을 초과하면 저축이름이
회색으로 변하면서 비활성화된다.
4 새 저축 만들기
지금 있는 저축 이외에 새로운 저축을 만들고 싶다면
새 저축만들기 버튼을 클릭하면 된다.
1 2
3
4
메뉴에서 저축을 누르면 나오는
저축기능의 메인 페이지.

1 이름 내가 만들고 싶은 저축의 이름을 쓸 수 있는 칸이다.
2 설명 현재 날짜부터 도전 종료일까지 며칠 남았는지 알려준다.
3 고정저축
고정저축을 원할 때 선택할 수 있다.
고정저축이란 기간과 금액을 설정하여, 설정한 기간마다
설정한 금액을 고정적으로 저축하는 저축방식이다.
고정저축을 선택하면 자유저축이 회색으로 비활성화된다.
또한 저축 주기와 금액, 저축방법을 선택할 수 있는
페이지가 팝업으로 뜬다.
4) 저축 (새 저축 만들기)
저축 메인 페이지에서 새 저축 만들기
버튼을 누르면 나오는 페이지.
1
2
3

4 자유저축 내가 만든 저축목록의 이름을 볼 수 있다.
5 목표금액, 목표기간 지금까지 저축을 얼마나 했는지 축적금액을 볼 수 있다.
6 아이콘
저축 설정에서 목표기간과 목표금액을 선택할 수 있다.
목표기간이 지나거나, 목표금액을 초과하면 저축이름이
회색으로 변하면서 비활성화된다.
7 도움말
지금 있는 저축 이외에 새로운 저축을 만들고 싶다면
새 저축만들기 버튼을 클릭하면 된다.
4
5
6
7
저축 메인 페이지에서 새 저축 만들기
버튼을 누르면 나오는 페이지.
4) 저축 (새 저축 만들기)

저축 메인 페이지의 저축 목록에서
저축 이름을 클릭하면 나오는 페이지.
1 2
3
4
1 저축이름
내가 정한 저축의 이름과, 고정저축과 자유저축의
아이콘 중 하나가 나타난다.
2 설정 아이콘
저축 설정 바로가기 버튼으로,
선택하면 저축 설정 페이지가 나타난다.
3 저축 설명
처음 저축을 설정할 때 입력했던 저축설명이 나타난다.
만약 설명을 쓰지 않았다면 글이 나타나지 않는다.
4 목표금액, 목표기간
목표금액과 목표기간이 나타난다.
만약 목표금액이나 목표기간을 선택하지 않았다면
나타나지 않는다.
4) 저축 (저축 내용)

5 그래프
나의 저축 상황을 알려주는 그래프가 나타난다.
목표금액을 설정했다면 파이그래프가 나타나고
목표금액을 설정하지 않았다면 누적막대 그래프가 나타난다.
자유저축에서 목표기간이 설정되어있다면 목표기간까지
얼마나 남았는지를 알려주는 막대그래프도 나타난다.
6 도움말
그래프 자세히 보기 버튼이다. 저축한 날짜, 저축한 금액 등
그래프에 대한 자세한 정보를 확인 할 수 있다.
7 저축 설명
지금까지 저금한 금액과
목표까지 남은 금액을 확인할 수 있다.
목표금액이 없다면,
목표까지 남은 금액은 나타나지 않는다.
저축 메인 페이지의 저축 목록에서
저축 이름을 클릭하면 나오는 페이지.
5
6
7
4) 저축 (저축 내용)

5) 시뮬레이션
1
분야별
지출한도 설정
분야별 지출한도 설정 버튼을
누르면 분야별 한도설정 창이
뜬다. 분야별로 설정한 한도
금액은 시뮬레이션 결과에
반영된다.
2 현재 남은 금액 현재 나의 남은 금액을 알려준다.
3 예상 지출 금액 예상 지출금액을 입력할 수 있다.
4 바코드 인식
바코드를 인식시켜 직접 금액을 입력하지 않아도
자동으로 예상 지출 금액을 입력할 수 있다.
5 지출분야선택 지출할 분야를 선택할 수 있다.
예상지출금액을 입력하고 시뮬레이션해
미래를 예측해볼 수 있는 페이지.
1
3
2
4
5

5) 시뮬레이션
예상지출금액을 입력하고 시뮬레이션해
미래를 예측해볼 수 있는 페이지.
6 바코드 인식
바코드를 인식시켜 직접 금액을 입력하지 않아도
자동으로 예상 지출 금액을 입력할 수 있다.
7 시작
시작 버튼을 클릭하면
시뮬레이션 결과 페이지가
나타난다. 하루 사용가능
금액 대비 예상지출금액,
분야별 지출한도 대비 예상
지출금액을 좋음, 보통,
나쁨, 매우나쁨 기준으로
알려준다. 분야별 지출한도를
클릭하면 분야별 한도금액을
자유롭게 설정할 수 있다.
아래에는 현재와 지출 후
미래의 하루 사용가능 금액,
전체 남은 금액을 알려준다.
좋음-0.5, 보통-1, 나쁨-5,
매우나쁨-10을 기준으로 한다.
10 이상일 경우에는 그래프가 꽉
찬 매우나쁨으로 표시된다.
7
6

5) 시뮬레이션
1 거지 캐릭터 거지 캐릭터가 현재 재정 상태를 행동과 말로 표현한다.
2 지출 평가 1
전체 사용가능금액 대비 예상지출금액을 비교해 지출이 합
리적인지 아닌지를 평가해준다.
3 지출 평가 2
분야별 지출한도 대비 예상지출금액을 비교해 지출이 합리
적인지 아닌지를 평가해준다. 분야별 지출한도를 누르면
설정을 변경할 수 있다.
4 현재 현재 하루 사용가능금액과 전체 남은금액을 나타낸다.
5 미래 미래의 하루 사용가능금액과 전체 남은금액을 나타낸다.
1
32
4
5

1 검색창 제품명, 브랜드명, 카드명을 검색할 수 있다.
2
최근 업데이트된
할인정보
최근에 업데이트된 할인정보 상위 10개
제품 정보를 알려준다. 실시간으로 업데이트된다.
3 브랜드별
검색하지 않고 누를 시 브랜드
선택창으로 이동한다. 브랜드 선택창에서
브랜드를 검색할수도 있고, 해당 브랜드를
누르면 해당 브랜드의 할인 품목만 나열된
목록이 나오는 화면으로 이동한다.
4 분야별
검색하지 않고 누를 시 분야 선택창으로
이동한다. 분야를 선택하면 해당 분야의
할인품목만 나열된 목록이 나오는
화면으로 이동한다.
5 카드별
검색하지 않고 누를 시 카드 선택창으로
이동한다. 카드를 선택하면 해당 카드의
할인품목만 나열된 목록이 나오는
화면으로 이동한다.
1
2 3 4
5
6) 할인정보 (메인)
할인정보 메뉴를 누르면 나오는
할인정보 메인 페이지.

1 브랜드별 제품명, 브랜드명, 카드명을 검색할 수 있다.
2 분야별
최근에 업데이트된 할인정보 상위 10개
제품 정보를 알려준다. 실시간으로 업데이트된다.
3 카드별
검색 후에 누를 시 검색한 할인정보
목록 중 해당 카드의 제품들만 걸러진다.
4 정렬순서
최신순, 이름순, 가까운순 중
자유롭게정렬방식을 선택할 수 있다.
기본값은 최신순이다.
5 할인 내용
해당 제품이 몇 퍼센트 할인하는지, +1 할인인지 등의
할인 정보와 할인된 금액을 알려준다.
6) 할인정보 (검색어 입력시)
1 2 3
4
5
할인정보 메인 화면에서
검색어를 입력했을 때 나오는 페이지.

할인정보 메인 화면에서
검색어를 입력했을 때 나오는 페이지.
6 할인 기간 할인기간을 년, 월, 일 단위로 알려준다.
7 최저가 웹사이트
해당 품목을 최저가로 판매하는 웹사이트가 있을 경우
인터넷 링크를 걸어둔다. 클릭 시 사용자의 휴대폰에 있
는 인터넷 앱으로 연결된다.
8 위치정보
현재 위치에서 가장 가까운 판매처 위치를 지도를
통해 알려준다. 더 자세한 정보를 원하는 사용자를 위해
지도 화면에 ‘지도 앱으로 이동’ 버튼이 있고 클릭 시
사용자의 휴대폰에 있는 지도 앱으로 연결된다.
사용자설정에서 gps가 켜져 있을 시에만 사용 가능하고,
꺼져있을 시 설정할 수 있는 팝업이 뜬다.
9 할인카드
사용 가능한 카드가 한 개 이상일 시 +버튼이 나타난다.
버튼을 클릭하면 카드 목록이 나타나고,
-버튼을 누르면 목록을 접을 수 있다.
6 7
8
9
6) 할인정보 (검색어 입력시)

7) 사용자 설정 (메인)
1
3
4
5
2
메뉴에서 사용자 설정을 클릭했을 때
내가 설정할 수 있는 항목 페이지.
1 고정수입 고정수입을 설정할 수 있다.
2 분야비율 나의 지출 분야별 비율을 설정할 수 있다.
3 나의 지출한도 지출 분야별 지출 한도를 설정할 수 있다.
4 연동설정 카드 문자서비스 및 입출금내역 연동 여부를 설정한다.
5 푸쉬설정 어떤 푸쉬 기능을 사용할지 자유롭게 선택할 수 있다.
6 위젯설정 위젯에 어떤 기능을 사용할지 자유롭게 선택할 수 있다.
6

7) 사용자 설정 (도전설정)
1 도전기간
날짜 옆 달력 그림을
눌러 달력에서 도전 시작,
종료 날짜를 설정할 수 있다.
2 도전금액 도전금액을 설정할 수 있다.
3 도전수정
도전을 진행 중인 경우 도전수정 버튼을 클릭해 도전 기간과
금액을 수정할 수 있다. 아직 도전을 시작하지 않은 경우 도
전시작 버튼을 눌러 도전 기간, 금액을 설정할 수 있다.
4 도전끝내기
도전을 진행 중인 경우 도전 끝내기 버튼을 클릭해 현재 진
행중인 도전을 끝낼 수 있다.
메뉴 바에서 도전설정을 눌렀을 때
나오는 페이지. 도전기간과 도전기간을
새롭게 설정하거나, 현재 도전을 끝낼 수 있다.
1
3
4
2

7) 사용자 설정 (분야비율)
1
32
사용자설정에서 분야비율을 눌렀을 때
나오는 분야비율 설정 페이지.
1 비율 조정(-,+)
전체 지출 금액에서 분야별로 차지하는 비율을 설정할 수
있다. -나 +버튼을 이용할 수도 있고, 숫자 부분을 클릭해
직접 금액을 입력할 수도 있다. 분야비율을 처음 설정
하는 경우 전체 지출 분야 비율 평균으로 기본값이 설정
되어 있다.
2 합계
분야별 비율 총합을 확인할 수 있다.
정확히 100퍼센트가 되었을 때
분야 비율을 보여주는 파이 그래프가
합계 아래 부분에 나타난다.
3 완료 완료 버튼을 누르면 분야비율 설정을 완료할 수 있다.

7) 사용자 설정 (지출한도)
사용자설정에서 지출한도 페이지를 눌렀을 때
나오는 지출한도 설정 페이지.
1 분야별 한도설정
나의 지출한도를 정해서 각 분야마다 제한을 두어
충동구매를 막을 수 있게 할 수 있다.
2 분야
식품, 생활용품, 교통, 문화, 공과금, 의류 미용, 교육등
각 분야별로 설정하였다.
3 한도금액 각 분야별 내가 정한 한도금액을 쓸 수 있도록 하였다.
1
32

7) 사용자 설정 (연동설정)
1
3
2
사용자설정에서 연동설정을 눌렀을 때
나오는 연동 설정 페이지.
1 카드 연동
내가 가지고 있는 카드와 연동시키는 기능을 가지고 있
다.
2 통장연동
카드와의 별개로 통장만 가지고 있는 유저들은 통장만 연
동시킬 수 있도록 설정 할 수 있다.
3 은행설정 통장을 연동시킬때, 해당 통장의 은행을 설정 할 수 있다.
4 계좌번호 설정
통장을 연동시킬때, 나의 통장 계좌번호를 입력함으로서
연동기능을 설정 할 수 있다.
5 주의사항
내가 연동할 카드와 통장을 같은 종류로 설정하면 겹치게
되므로 반드시 다른 종류의 카드나 통장으로 설정해야 한
다.
5
4

7) 사용자 설정 (푸쉬설정 / 위젯설정)
사용자 설정에서 푸쉬설정을 눌렀을 때
나오는 푸쉬설정 페이지.
사용자 설정에서 위젯설정을 눌렀을 때
나오는 위젯설정 페이지.

1 자유게시판
다른 사용자들과 익명으로 자유롭게 의견을 나눌 수 있다.
공감 버튼, 댓글 기능을 사용할 수 있다.
2 꿀팁게시판
다른 사용자들에게 자신의 절약 관련 꿀팁 정보를 알려줄
수 있다. 매일 공감 및 댓글 수가 높은 게시글 상위 3개를
게시판 상단에 게시해준다.
8) 커뮤니티
익명으로 의견을 나눌 수 있는 페이지.
1 2

9) 위젯
1
남은 금액 중
오늘 하루 쓸 수
있는 돈의 잔액
오늘 하루 쓸 수 있는 돈의 잔액이 얼마인지 알려준다.
2 전체 남은 금액 오늘 하루 쓸 수 있는 돈의 잔액이 얼마인지 알려준다.
3 도전 종료 디데이 현재 날짜부터 도전 종료일까지 며칠이나 남았는지 디데이로 알려준다.
4 현금 입력
앱의 현금 입력 페이지로 이동한다.
입력하는 현금은 오늘 날짜에 기록된다.
5
현재 소비생활 문
제점
최근 수입, 지출 내역 분석을 토대로 한
최근 나의 소비생활 문제점을 알려준다.
6 할인 정보 앱의 할인 정보 메인 페이지로 이동한다.
1
3
4 5 6
2

4. 2016 GUI 디자인 트렌드

-정의
앱 개발사들을 위해 구글이 제시한 디자인 가이드 라인이며,
사용자들을 위한 공통적인 시각적 언어를 만들기 위해 개발한 것.
!
-목적
개인의 디지털 디바이스 개수의 증가와 구글의 다양한 전자기기 개발및 출시로
안드로이드 os기반 기기가 폭발적으로 증가 했기 때문.
구글이 제시한 가이드는 방향또는 팁을 제공 할 뿐 반드시 지키라는 의미는 아님.
1. Material Design
4 2016 GUI 디자인 트렌드

>표면과 그림자의 구조는 일관성있게 유지되어야 함.
!
>하나의 화면은 10개 미만의 표면으로 구성되는 것이 좋음.
화면 구성이 너무 복잡하지 않아야 하며, 너무 많은 중첩은 피하는 것이 좋음.
!
>단순한 단색으로 칠해진 표면을 사용함.
1) 입체적인 표면
'UI 를 구성하는 표면('디지털 종이')들은 다양한 높낮이를 가질 수 있으며,
각각의 표면 뒤에는 그림자가 생긴다.'
1. Material Design

(1) 세 종류의 키라인
!
>가능한 경우, 본문 텍스트, 썸네일, 앱 바 제목 등의 요소들은
세 종류의 키라인에 맞추어 정렬되어야 함.
!
>모든 UI 요소들은 8dp 단위의 베이스라인 그리드를 기준으로 정렬됨.
2) 대담하며 인쇄물의 특징을 갖는 디자인
"디지털 종이에 그려지는 '디지털 잉크'는 전통적 인쇄물 디자인과 같이,
대담한 색상과 텍스트, 상황에 맞는 이미지, 구조적인 여백과 같은 특징을 갖는다."
1. Material Design

(2)주요색과 강조색이 지정된 머터리얼 테마
!
>앱의 브랜딩을 위해 색상 팔레트가 주의깊게 선정되어야 하며,
표면의 배경과 텍스트 뷰, 체크박스와 같은 주요 UI 위젯에 기본 색 (primaryColor)
과 강조 색 (accentColor)이 일관되게 사용되어야 함.
!
>이미지에서 추출된 색상을 인접한 UI 요소 혹은 표면의 배경색으로 사용.
!
>사진의 경우 시스템 상태바를 포함, 화면을 꽉 채우는 형식으로 표시.
2) 대담하며 인쇄물의 특징을 갖는 디자인
"디지털 종이에 그려지는 '디지털 잉크'는 전통적 인쇄물 디자인과 같이,
대담한 색상과 텍스트, 상황에 맞는 이미지, 구조적인 여백과 같은 특징을 갖는다."
1. Material Design

Hero 전환 애니메이션
!
>어떤 아이템을 클릭하여 상세 화면으로 전환되는 경우, 옆의 그림과 같이 선택 된
아이템이 목록 화면에서 상세 화면으로 자연스럽게 전환되는 'Hero 전환' 을 적용.
!
>잔물결 효과 는 터치가 일어난 자리에서 시작되며 아이템에 터치가 되었다는
피드백을 주기 위해 사용.
!
>UI 요소는 원형의 '나타나기(reveal)' 애니메이션을 사용해 나타남.
!
>애니메이션은 아이콘 상태 전환 혹은 텍스트 전환 등 좀 더 섬세하고 재밌는 방법
으로 사용될 수 있음. 예를 들어 + 형태의 아이콘을 x 형태로 변신시키거나,
외곽선만 있는 하트 모양 아이콘에 칠하기 효과를 이용해 색을 채울 수도 있음.
"주의 깊게 사용된 모션은 사용자에게 앱의 상태에 관한 시각적 연속성을
제공하며, 사용자가 UI에서 일어나고 있는 일을 쉽게 알아 챌 수 있도록 돕는다."
3) 의미있는 모션
1. Material Design

"입체적 표면, 대담한 그래픽 디자인, 의미있는 모션은 핸드폰, 태블릿, 랩탑, 데스크탑, TV, 웨
어, 자동차까지, 어떤 스크린에서든 통일성 있는 사용자 경험을 제공하기 위해 어우러져야 한다.
또한 아래에 있는 주요 UI 패턴들은 앱이 디바이스를 넘나들며 일관되게 유지되어야 한다."
(1) FAB - Floating Action Button
!
>반응형 디자인이 적용된 가장 좋은 사례는 화면의 크기와 회전 여부에 따라
앱의 UI 가 알맞게 변경되는 것.
!
>가능한 경우, 앱은 동그란 형태의 플로팅 액션 버튼을 사용해
주요 액션을 나타낼 수 있음.
!
>플로팅 액션 버튼은 그림자를 갖는 별개의 표면이며,
배경색으로는 밝은 계통의 강조 색을 사용하는것이 일반적.
4) 적응형 디자인과 UI 패턴
1. Material Design

(2) 머티리얼 디자인 탭
!
>탭은 머티리얼 디자인의 새로운 상호작용과 스타일 가이드를 준수해야 함. 탭 사이에는
구분선이 없으며 최상위 탭은 시각적으로 앱 바의 일부처럼 보이게 디자인되어야 함.
!
>사용자가 스와이프를 통해 탭을 전환 할 수 있어야 함.
!
>선택된 탭은 전경색의 변화와 탭의 텍스트 혹은 아이콘 밑의
강조 색상(colorAccent)의 구분선으로 구분됨.
(3) 앱 바 (액션 바)
!
>앱 바는 표준 앱바의 세로 길이 보다 2배 혹은 3배 길게 디자인 될 수 있음.
화면이 스크롤 됨에 따라 앱바의 크기가 자연스럽게 표준 크기로 줄어 들도록 구현할 수 있음.
!
>앱 바는 경우에 따라 완전히 투명하게 디자인 될 수도 있으며 텍스트와 액션을 갖고
이미지 위에 위치할 수 있음. 구글 플레이 뉴스스탠드 앱이 이러한 방식으로 구현되었음.
1. Material Design

(4) 머티리얼 디자인이 적용된 네비게이션 드로어
!
>네비게이션 드로어를 사용하는 경우, 옆의 그림과 같은 새로운 머
티리얼 디자인 가이드라인을 준수해야 함.
!
>안드로이드 5.0 에서 앱 바에서 가장 왼쪽에 있는 아이콘은
네비게이션 드로어 표시 이며, 앱 아이콘은 사용.
!
>텍스트와 아이콘은 위에 설명된 키라인을 따라 배치됨.
1. Material Design

2015년부터 유행하고 있는 ui 애니메이션이 더 성행할 것으로 보임.
2. UI animation

백그라운드 이미지를 그라데이션 컬러를 활용해 심플하게 표현한 웹사이트가 유행.
3. Gradient background rule

일러스트나 패턴을 활용한 배경이미지는 텍스트를 보완하고,
시각적 매력지수를 증가시키는 등 사이트의 가독성 향상에 중요한 역할을 하고 있음.
4. Background with pattens

다음으로 수직으로 화면이 분할되어 있는 웹 사이트가 꾸준한 인기를 가짐.
어떠한 기능을 담고 있는지 명확하게 알려주기 때문.
5. Vertical split style

모듈형 그리드 레이아웃은 통일감을 주고 반응형 웹 사이트에도 적합한 디자인.
유연한 구조이기 때문에 폴더나 페이지가 추가되더라도 기존의 폴더와 잘 어울릴 수 있는 구조임.
6. The modular grid approach

제품이나 회사, 개인이 가지고 있는 특징들을
간단한 일러스트와 함께 소개하는 서비스 분류에 효과적이고, 한눈에 알아보기쉬움.
7. Feature point

미니멀하고 플랫한 디자인에 색상대비가 강한 컬러를 사용하여
콘텐츠에 더 집중할 수 있고, 플렛 디자인의 단점을 보완하여 눈에 띄는 효과를 제공.
8. Contrast with dull color

백그라운드 색상이나 사진, 일러스트, 버튼 등에 텍스쳐를 활용해
디테일한 표현을 할 수 있고 플랫한 스타일에 질감을 넣는 것으로
단순함을 보완하고 풍부한 느낌을 받을 수 있음.
9. Texture

5. 벤치마킹 _ 앱 디자인

1) 돈버는 가계부 2) 모뉴먼트 밸리
용돈기입장 앱이다. 수입, 지출 뿐 아니라
부채와 저축까지도 관여한다.
단계별로 목적지에 도달해야 하는 게임이다.
환상적인 건물과 불가사의한 기하학
구조 속에서 벌어지는 초현실적 탐험이
담겨 있다.
날씨를 알려주는 앱이다.
귀여운 일러스트로 날씨를 알려준다.
3) 호우호우
5 벤치마킹_ 앱 디자인

1) 돈버는 가계부 (특징)
아이콘은 주조색인 민트색과 주황색을 사용하여 돼지저금통 픽토그램을 만들었다.
깔끔하게 필요한 정보만 넣어서 정보에 대한 집중도를 높였다.
화면의 위에서부터 정보를 차례대로 늘어놓아 긴 스크롤을 사용하였다.

1) 돈버는 가계부 (텍스트)
가독성이 좋은 고딕체를 사용하였다. 민트색 배경에는 흰색 글씨를 사용하고,
흰색 배경에는 검은색 글씨를 사용해서 정보전달에 효과적이었다.
강조하고 싶은 부분은 노란색이나 주황색을 사용하였다.

1) 돈버는 가계부 (색상)
그래프에는 민트색과 주황색의 유사색으로 구성되었다. 수입과 지출을 색상으로
구별했다. 수입은 민트색, 지출은 주황색을 사용했다.

1) 돈버는 가계부 (그래프 표현)
예산대비 지출에서는 도넛형 그래프, 결제 금액에서는 꺾은선 그래프,
총 저축액은 막대 그래프를 사용했다.
그래프는 메인색인 민트색과 강조색인 주황색의 유사색들로 이루어져있다.

2) 모뉴먼트 밸리 (특징)
아이콘에 게임의 전제척인 분위기를 담아냈다.
각 단계마다 다른 색상의 3D 구조물이 등장했다. 또한 각 단계마다
다른 스토리를 갖고, 착시현상을 이용한다.

2) 모뉴먼트 밸리 (구성)
1단계부터 10단계까지의 게임이 있고, 번외게임이 있다.
게임에는 주인공인 아이다가 등장하고 아이다를 도와주는 토템이 있다.

2) 모뉴먼트 밸리 (색상)
전체적으로 동화같은 분위기를 자아내는 파스텔톤을 사용했고,
부드러운 그라데이션을 많이 사용했다.

2) 모뉴먼트 밸리 (인터렉션)
전체적으로 느리고 부드러운 인터렉션을 사용한다. 클릭으로 주인공인
아이다를 움직 일 수 있다. 건물을 돌리거나 변형시킬 수 있는 부분이 있다.
전체적으로 부드럽고 느린 인터렉션을 보인다.
까마귀가 주인공인 아이가의 경로를 방해하기도 한다.

3) 호우호우 (특징)
아이콘은 호우호우에 등장하는 캐릭터의 얼굴을 사용했다.
날씨에 걸맞는 귀여운 일러스트로 사용자에게 날씨를 알려준다.
색감과 일러스트가 직관적이라 쉽게 날씨를 알 수 있다.

3) 호우호우 (서체)
손그림 일러스트와 어울리는 동글동글하고 귀여운 고딕서체를 사용하였다.

3) 호우호우 (색상)
호우호우의 캐릭터는 하늘색이고 전체적으로 부드러운 파스텔 톤을 사용하였으며,
날씨와 시간에 따라 어울리는 색상으로 변한다.

3) 호우호우 (인터렉션)
캐릭터를 활용한 인터렉션이 많이 나온다. 로딩할 때는 캐릭터에 물이 차는
인터렉션이 나오고 비가 올때는 빗방울들이 떨어지는 인터렉션이 나온다.

6. 기타 디자인 레퍼런스

치키
6 기타 디자인 레퍼런스 - 캐릭터

시니컬토끼

몽실통통

픽통령

페이지 네비게이터
화면이 전환 되면서 점이 서로 연결되었다 떨어진다.
6 기타 디자인 레퍼런스 - UI 애니메이션

로딩
병에 물이 채워지는 애니메이션

알림
메세지 아이콘에서 비행기로 변하는 몰핑 애니메이션

메뉴
하나씩 차례대로 뜨는 애니메이션

그래프
파이 그래프가 서서히 생기는 애니메이션

라인 위주로 아이콘 디자인을 리서치함
6 기타 디자인 레퍼런스 - 아이콘

6 기타 디자인 레퍼런스 - 기타

7. 캐릭터 디자인 - 1차
여러 캐릭터 시안 중 가장 심플하고 귀여운 느낌의 캐릭터를 선택

선택된 캐릭터 시안을 다양한 외형의 거지 캐릭터로 발전시킴
7. 캐릭터 디자인 - 2차

대학생 타겟층을 고려한 젊은 연령대의 다양한 성별의 캐릭터로 발전시킴
7. 캐릭터 디자인 - 최종

부록

More Related Content

Viewers also liked

Similar to 부록

More from heejaekim

부록