2019 PORTFOLIO DESIGNER KIM GYUNGHA
DESIGN PORTFOLIO ~ 2018.10
CONTENTS
PERSONAL PROJECT TALK TO ME ::
UX/UI GUI Illustration Information visualization
AR guestbook posting service app
ACTION :: Actor’s cating service app
INFOGRAPHIC POSTER :: Water purifier principle
ANNUAL REPORT :: Editorial design of Marymond co.
TEAM PROJECT
(Group of Two)
쉐프의 레시피 :: Cooking app to help 1 family cook live
20 19
SEE U :: AR guesthouse info serevice app
ICEBREAK :: Recreation game app for Communities
TALK TO ME
전시장 AR 방명록�서비스�앱
AR기술을�통해�졸업생의�졸업작품�부스에�나의�축하의�메세지를�띄어보내는�어플리케이션. PERSONAL PROJECT OUTPUT, ROLE GUI (100%) / Prototype (100%) / Animation (100%) / Css (80%) PROJECT MANAGEMENT Graduation Personal Projcet Development supporting by Letsee Coporation PROJECT PERIOD 2017 .06 - 2017. 10
BACKGROUND
SOLUTION
선물과�메세지들로�작품�주변이�산만하다.
졸업생에게�가장�큰�선물이�될�것이라는
졸업전시장에는�많은�화환과�꽃다발,
생에�한�번뿐인�졸업전시장에서의�기록이
축하의�마음과�발걸음이�감사하지만,
생각에서�출발한다. 관람객은�방명록을�남기고
4년동안�배운�것을�쏟아낸�작품을�전시하는
싶은�졸업생의�부스에�부착된�증강�그래픽을
단�한번�뿐인�졸업전시장에서의�의미있는
앱을�통해�증강해�방명록을�보낼�수�있고,
축하는�무엇일까�생각해본다.
자신이�선택한�선물�그래픽과�작성한�메시지,
사진을�졸업생의�부스에�증강시켜�볼�수�있다.
HOW TO USE 1
2
3
각�졸업작품부스에�부착된�작품별
글�작성과�사진촬영, 첨부로
졸업생의�졸업작품�주변에
방명록을�보낼�졸업생을�선택한다.
보내고싶은�선물�그래픽을
선택한�선물이�나타난다.
증강그래픽�통해�앱에�접속하여
방명록을�남길�수�있다. 선택할�수�있다.
관람객이�작성한�방명록과
KEY GRAPHIC
메세지를�증강시킬�때�졸업생에게�보여지는�선물�그래픽이다. 졸업생에게�주로하는�선물을 5가지로�분류하여 그래픽을�만든�후, GIF형태로�완성하였다. 졸업생�부스에서�증강하였을�때�선물에�생동감을�주고자�했다.
SERVICE INFO VIDEO URL _ https://youtu.be/cCbNTSDHHt8
카드선물
꽃, 식물
간식, 음료
쿠폰, 선물
응원, 기도
EXHIBITION PLAN
웹앱으로�제작되어�관램객의�휴대폰에서�웹URL로�즉시�접속이�가능
UI FLOW
01. View
하며, 졸업전시장�각�작품�부스에�부착된�증강�그래픽을�통해�해당 작품의�졸업생에게�방명록을�직접�띄어보낼�수�있다.
View Card
졸업생의�증강그래픽�위에�앱의 카메라화면을�위치시키면, 해당 졸업생에게�작성된�방명록들이 졸업생의�부스에�증강된다.
0. 앱�초기화면
AR STARTING GRAPHIC CARD 아래 중앙에 위치한 로고를 Talk To Me앱에 증강하여 방명록을 보낼 수 있습니다.
아래 중앙에 위치한 로고를 Talk To Me앱에 증강하여 방명록을 보낼 수 있습니다.
02. Send
4cm
Sending Card
13cm
우측�상단에�쓰기�플로팅�버튼을�탭하면
해당�작품의�졸업생에게�방명록을�작성할�수�있다.
4cm
여러명이�작품을�진행했을�경우�나타나는�얼굴�중
13cm
White 배경
Black 배경
- 졸업작품�로고의�명,채도가�낮은�경우
- 졸업작품�로고의�명,채도가�높은�경우
- 밝은�곳에서�전시하는�작품�일�경우
- 어두운�곳에서�전시하는�작품�일�경우
한명만�택한�후�메세지를�보낼�수�있다.
방명록�내용, 사진을�첨부할�수�있고�함께�보낼
선물�그래픽을�선택한�후�보낸이의�이름을�작성한다.
증강되는�메세지를�탭하면 입력된�메세지가�보이고,
하단�창을�상단으로�스와이프하면 최근�온�방명록을�볼�수�있다.
03. Library
04. Searching
Library
Searching
탭하면�전체�졸업생의�명단과�각�졸업생이
이름�초성�검색만으로도�추천을�해주고,
메인�카메라�화면�우측�최상단�버튼을 받은�메세지와�사진들을�볼�수�있다.
우측�상단에�검색�탭을�누르면�졸업생들의 빠르게�졸업생을�찾을�수�있다.
ACTION
연기자 & 모델�캐스팅�앱�서비스
이미지�위주의�피드와�이미지�위주의�검색기능을�통해�쉽고�빠르게�원하는 배우,모델을�찾을�수�있도록�하는�어플리케이션
BACKGROUND
기존의�캐스팅�앱,웹�서비스는�연기자와�모델이�지원서를�제출한�뒤�피드백을�받기
어렵다는�구조적�약점이�있다. 배우, 모델의�포트폴리오를�공개적으로�공유하는라 플랫폼의�부재로�이런�현상이�나타난�것�이라고�생각한다.
SOLUTION
감독�지망생과�연기자�지망생들을�만나�캐스팅�구조에�대해�조사하면서�캐스팅 디렉터의�역할의�중요성을�알게되었고, 캐스팅�디렉터가�캐릭터를�찾기�쉽도록 검색필터가�강화된�캐스팅�앱을�제안한다.
감정, 느낌�형용사�필터링
TWO CHANNEL 연기자�모드
제작자�모드
PERSONAL PROJECT OUTPUT, ROLE GUI (100%) / Prototype (100%) / Animation (100%) PROJECT MANAGEMENT Personal Projcet PROJECT PERIOD 2017. 11 - 2017. 12
연기자와�모델의�선택하는�가장�큰�기준은 ‘다양한�연기의�스팩트럼’ 과 ‘마스크’임을�중점을�두고�연기자는�자신의�마스크를�잘�나타낼�수�있도록 이미지�기반의 UI로�디자인하였다. 제작자는�원하는�캐릭터, 마스크를�편리하게�검색할�수�있도록 형용사�기반의�카테고리를�제안한다.
UI FLOW
01. Main ACTION
메인�화면으로�하단�텝바에�좌측을
텝하면�나타난다. 상단�메뉴�텝바에 보이는�카테고리�순대로�연기영상, 이미지�사진, 캐릭터�모집�공고를
볼�수�있으며�최신�업로드�순으로 피드에�나타난다.
VIDEO
연기영상을�탭하면�가로화면으로
화면이�전환되면서�영상을�크게�보며�시청할�수�있다.
RANKING
연기자가�메인화면에서�사용자들이 업로드한�연기�영상과�이미지�중 많이�찾는�영상지,이미지�순으로
이미지들이�바둑배열로�피드에�나타난다.
02. Search
Filtering Search
메인화면에서�우측�상단에�필터링�버튼을 탭하면�화면�하단에서�슬라이딩�팝업되어 필터링�팝업창이�나타난다. 영상�필터링�카테고리로는
나이, 성별, 감정을�구분하여�볼�수�있다. 이미지�카테고리로는
고양이상, 여우상, 곰상�등으로�마스크를 동물에�비유하여�나타내었다.
03. Profile
Filmography
배우들의�신상정보�및�활동내용, 작업했던�작품을�볼�수�있다.
빅데이터�상에서�어울리는�브랜드를 가상으로�캐스팅하여�추천해준다.
상단에는�배우를�잘 표현하는�느낌을 형용사로�보여준다.
INFO
Infographic visulization
우리가�마시는�물을�필터링�해주는�정수기의 필터원리를�단계별로�인포그래픽으로�시각화했다.
PERSONAL PROJECT OUTPUT, ROLE AI (100%) / Plan (100%) PROJECT MANAGEMENT Personal Projcet PROJECT PERIOD 2014. 04 - 2014. 05
BOOK Editorial design
마리몬드라는�회사에서�연간리포트
TFT의�메인�디자이너로�내용구성, 기획, 디자인을�총괄하였다.
애뉴얼리포트 링크
https://issuu.com/marymond/docs/marymond_2015_annualreport
PERSONAL PROJECT OUTPUT, ROLE AI (100%) / Plan (100%) PROJECT MANAGEMENT Marymond co, PROJECT PERIOD 2015. 11 - 2016. 01
쉐프의�레시피
혼밥러의�외롭지않은�식사를�위한�레시피�공유�플랫폼�앱
수준있는�요리를�먹고싶은�혼밥족을�위해�서로의�레시피를�공유하고�라이브�방송으로 특정�레시피를�함께�요리하는�소통형�레시피�어플리케이션
TEAM PROJECT OUTPUT, ROLE GUI (70%) / Plan (50%) PROJECT MANAGEMENT Personal Projcet PROJECT PERIOD 2018. 03 - 2018. 04
BACKGROUND
UI FLOW
건강한�재료로�맛있는�음식을�요리하는�것을�즐기는
01. Recipe
웰빙, 혼밥족, 요섹남, 욜로가�방송�키워드인�요즘이다. 욜로족이�늘어나고�있다. 기존의�레시피를�공유하는�것을
넘어서�적극적으로�요리의�즐거움을�공유하는�플랫폼을 필요하다고�생각한다.
SOLUTION
라이브�방송 적극적으로�요리의�즐거움을�공유하는�것을�목적으로
스와이프
라이브�방송을�제공한다. 인기있는�레시피는�라이브쿡 방송일정이�섭외된다. 함께�방송을�보며�요리하면서
재료손질부터�요리의�자세한�부분, 시식까지�요리의
총체적�즐거움을�실시간으로�공유할�수�있도록�제안한다.
DESIGN CONCEPT 신뢰성
직관성
따뜻함
레시피의�신뢰성을�높이기�위해�주로�명조체를�사용하 였다. 식감을�돋구는�난색을�주로�사용하고�이미지형 위주 UI로�쉽고�빠르게�레시피를�따라갈�수�있도록 유도하였다.
스와이프하여�쉐프마다�업로드�된 레시피를�확인할�수�있다.
상,하로�카드를�스크롤하면서�레시피들을 확인할�수�있고, 인기순/등록순으로도
카테고리를�탭하여�목록정렬을�변경할�수 있다.
쉐프의�사진을�탭하면�나타나는 쉐프�프로필�앤드페이지�이다.
짧은�소개와�인기있는�레시피들을 볼�수�있다.
특정�레시피�카드를�탭하면�나타나는�앤드페이지이다. 이미지�위주의�설명으로
쉽고�빠르게�요리를�따라할�수�있도록�디자인하였고, 하단에는�쉐프의�라이브쿡 일정이�있다면�배너가�나타난다.
02. Question
쉐프에게�질문한�내용을�모아보는�질문
페이지이다. 우측�하단에�질문�플로팅�버튼 을�통해�질문을�작성할�수�있다.
03. Book Mark
쉐프에게�보내진�질문카드의�앤드페이지이다. 쉐프에게�질문한�질문�밑에�쉐프가�직접 답변한�글이�함꼐�나타나여�답변을�바로�확인할�수�있다.
유용한�레시피는�즐겨찾기�해두는�책갈피�페이지이다. 좌,우�스와이프를�통해�책갈피로�표시해둔�레시피들을 확인할�수�있다.
04. Live Cook Show
라이브�쿡
라이브�중인�라이브�쿡�방송의�비디오�화면입니다. 함께�요리하면서�시청하기�때문에 멀리서도�내용에�집중할�수�있도록�비디오를�화면에�꽉�차게�하였습니다.
라이브�쿡�메인�페이지�입니다. 인기있는�레시피들
라이브�쿡�메인�우측하단에�일정표�플로팅�버튼을
현재�라이브�중인�레시피부터�먼저�나타납니다.
먼저�음식�카테고리를�선택한�후, 날짜를�스와이프
위주로�라이브�쿡을�앞두고�있는�레시피들이거나,
탭하면�나타나는�일정표�팝업�페이지�입니다.
하여�해당�날짜의�방송�일정을�목록으로�확인할�수 있습니다.
SEE U
AR 게스트하우스�가이드�앱
AR기술을�통해�호스트없이�게스트하우스를�안내받을�수�있는�서비스
DESIGN CONCEPT 01. 미션카드�형식의 UI Mission
HOST
GUEST
GUEST
Review
GUEST
호스트가�지정해놓은�게스트하우스�정보를 AR을�통해�게스트들에게�미션처럼�제시한다. 게스트는�제시된�미션을�직접�찾아가며�게스트하우스에�대한�정보를�습득한다.
숙소�후기와�여행�정보�교환을�통해�게스트간의�소통을�돕는 AR 게스트하우스�어플리케이션. 02. 게스트하우스는�또�하나의�여행지 게스트�하우스�내부를�하나의�새로운�여행지로�디자인한다.
Spot
Spot
Guest House Spot
MISSION GRAPHIC TEAM PROJECT OUTPUT, ROLE GUI (60%) / Prototype (100%) PROJECT MANAGEMENT Team Project PROJECT PERIOD 2017 .04 - 2017. 05
GUEST
여행지에서�각각의�랜드마크가�있듯, 호스트는�게스트하우스 내부에�스팟을�지정하여�게스트가�그�스팟을�찾아다니며 게스트하우스�이용에�관한�정보를�습득하도록�한다.
UI FLOW (GUEST MODE)
02. Finding Review
01.Finding Mission
Write review
Ar카메라 화면에서 우측 상단에
플러스(+) 플로팅 버튼을 탭하면
위치를 지정하여 리뷰를 남길 수 있다.
Main Mission
Spot Mission
View
도움없이 카드미션 형식으로 Ar카메라를
알려주는 미션으로 이용방법은 Main Mission과 동일하다.
나타나는 이미지를 탭하면 이미지의
여행객이 게스트하우스안에서 호스트의
재생한 상태에서 게스트하우스 내부를
카메라로 스캐닝하며 주요시설을 안내
받는다. 발견한 주요시설 대표 그래픽을 탭하면, 하단 메인 미션탭화면에 카드가 수집된 모습을 볼 수 있다.
주요시설 외에 게스트하우스 내부의 공유공간 및 이용팁등을
Ar카메라 화면에서 실내를 스캐닝할 때, 해당리뷰를 읽어볼 수 있다.
UI FLOW (HOST MODE)
01. Writing Mission
Write review
Writing Mission
Writing Mission
호스트 아이디로 로그인 후, Ar카메라 메인화면
설정한 태깅포인트에 미션명을 입력하고 증강할 태깅 그래픽을 선택한다.
우측 상단에 미션추가 플로팅 버튼을 탭한다. View review Ar카메라로 그래픽을 증강시키고 싶은 위치를 지정하기 위하여 펜으로 선을 그리듯 꼭지점을 탭하여 태깅 포인트를 설정한다.
Spot미션과 Mission카테고리를 선택하여 미션을 분류하여 보관한다.
ICE BREAK 레크레이션 게임 어플리케이션
카메라를 이용하여 공동체성 함양을 위한 미니게임을 진행할 수 있는 게임어플
DESIGN CONCEPT 01. 카메라 기능을 이용한 레크레이션 게임
단체
카메라 기능
모바일
기존�단체�모바일게임들과�달리�레크레이션의�주목적인�공동체성�함양을�위한�직접적인�활동성을 강화하기위하여�한공간에�팀원들이�모여있어야한다고�생각하였다.
모인사람들이�동시에�앱을�사용하여�활동성있게�인터랙션�할�수�있으며�함께�같은�공간을�공유하기위해
카메라�기능을�이용하여�게임을�기획하였다. 셀프카메라를�활용하여�난이도가�점점�어려워지는�얼굴인식기반 미션게임을�제공하여�게임을�통해�수집된�동영상을�꾸미고, 근처�앱�사용자들과�순위공유를�할�수�있는 레크래이션�카메라�게임을�디자인�하였다.
02. 맵을 통해 펭귄을 수집하는 공동의 목표 제시
TEAM PROJECT OUTPUT, ROLE GUI (60%) / Prototype (80%) PROJECT MANAGEMENT Team Project PROJECT PERIOD 2016 .11 - 2016. 12
UI FLOW
01. Home 앱실행 첫화면
메인화면에서 두가지 게임을 선택하여 게임을 시작할 수 있다. 각 게임은 10개의 단계가 있으며
02. Game 쉐이크페이스 게임
좌,우 스와이프로 각 게임에서 사용자가 통과한 단계를 지도 그래픽 위 펭귄그래픽을 통해 확인할 수 있다.
라이브러리
앱 사용자의 모바일에 촬영된 영상들이 저장되고 편집하고 공유할 수 있다.
편집화면에는 스티커와 텍스트를 넣어 영상을 꾸밀 수 있고 공유화면은 개인 SNS에 공유가능하다. 이벤트생성
진행자(모임을 주도하는 사람)가 비밀번호를 설정한 이벤트를 생성하여 근처 사용자들이 위치기반으로 검색되는 이벤트
에 입장하여 해당 이벤트의 순위정보를 공유받을 수 있다.
쉐이크 페이스게임은 카메라 화면에 게임에
참여할 인원의 얼굴이 모두 화면안에 들어오도록
위치시킨 후, 얼굴을 인식 한 후에 시작할 수 있다. 카메라가 각 사람의 얼굴을 인식한 후에는
랜던페이스 게임과 동일하게 1분내에 각 얼굴 그래픽이 위치한 곳에 같은 사람이 이동하여
3초간 원그래픽 위치에 고정시켜 인식시켜야 인식횟수가 인정된다.
02. Game 랜덤페이스 게임 메인화면에서 렌덤페이스 게임버튼의 ‘시작하기’를 탭한 뒤,
게임을 진행할 인원수를 선택한다. 카메라 환경을 생각하여 최대 5명까지
이용가능하다. 1분 내에 인원수에 맞게
화면에 배열되는 원안에
단계마다 제공되는 최소 인식
갯수를 넘겨야 다음단계로 게임을 진행할 수 있다.
각자의 얼굴을 3초 이상씩
인식 시켜야 인식갯수가 1회 인정된다.