권소연 UI/UX/WEB 포트폴리오
March 2014 - April 2015
권소연 UI/UX/WEB 포트폴리오
March 2014 - April 2015
1 다가감 2 johnmastersorganics 3 공허의 유산: 2. 쇼미더머니
다가감 Dagagam
기획, UX, GUI 디자인 2014. 03 - 2014. 05
참여율: 50%(외 국민대학교 시각디자인과 3명과 함께 프로토타입 제작)
다가감 Dagagam
About the Project 웨어러블 디바이스와 함께 청각장애인과 비장애인이 편리하게 의사소통을 할 수 있도록 하는 수화 통역 어플리케이션
다가감 Dagagam
Misson
Solution
청각장애인과 비장애인이 대화할 때 수화통역사가 많은 도움이 되지만 순서를 기다려야 하는
인체의 전기신호를 인식해 손 동작을 분석하는 암밴드 MYO와 핸드폰 마이크를 이용해
것을 불편한 점으로 꼽음
수화를 통역, 사용자간 편리한 대화를 유도
-김연신·이준우,『수화통역의 영역과 수화통역사의 역할수준에 관한 연구』,재활복지17.2, 2013, 76p
청각장애인
수화통역사
비장애인
청각장애인
비장애인
다가감 Dagagam
Concept
청각 장애인과 비장애인이 서로에게 ‘다가간다’
암밴드 MYO를 통한 느낄 ‘감(感)’
다가감
다가감: 청각장애인과 즉각적인 소통을 통해 비장애인과의 거리감을 줄이고자 함
Application Process 암밴드
Menutree 청각장애인
택시 문자서비스
DAGAGAM
취소
Dagagam
청각장애인
1. 장애 여부 결정
DAGAGAM
취소
연락
취소
DAGAGAM
취소
돋보기
연락
DAGAGAM
연락
대화목록
비청각장애인 저는
저는
사진
Dagagam
연락
나와 연결되어 있는 사람
당신은 무엇으로 말하는 사람입니까?
손으로말하는
입으로말하는
(청각장애인)
(비청각장애인)
입니다.
입니다.
영상
블루투스를 켜주세요.
이름을 입력해주세요.
키보드
마이크
마이크
비장애인
수화 교육 영상 암밴드와 연결해주세요.
119 112
취소
DAGAGAM
연락
취소
DAGAGAM
연락
취소
DAGAGAM
연락
취소
DAGAGAM
연락
DAGAGAM
취소
연락
취소
DAGAGAM
대화
취소
DAGAGAM
대화
대화목록
나와 연결되어 있는 사람
주소:ㅁㅁㅁㅁㅁㅁ 전화번호:ㅇㅇㅇㅇㅇㅇ
지도
별점:ㅇㅇㅇㅇㅇ 리뷰
00콜
한명과
현재위치 00시 00구 00동....
여러명과 긴급
콜
현재위치 00시 00구 00동.... 00콜 070-XXXX-XXXX
차량이 필요합니다.
00콜 070-XXXX-XXXX 00콜 070-XXXX-XXXX 00콜 070-XXXX-XXXX
1:1 상황
하나의 화면
1:여러명
채팅방
2. 대화 상황 결정
손
00콜 070-XXXX-XXXX
보내기
1:1
00콜 070-XXXX-XXXX
Strategy 1. 대화 상황을 1:1 과 1:다수로 나눠 상황에 맞게 디자인도 바뀐다. 1:1일때는 하나의 휴대폰으로 해결하도록 하고, 여러명일때는 채팅방을 만든다.
2. 사용자를 위한 부가서비스 비장애인을 위한 ‘수화 교육 서비스’와 청각장애인을 위한 ‘콜택시 문자 서비스’
1:1 상황
1:여러명
청각장애인
비장애인
(하나의 휴대폰)
(여러명이 쓸 수 있는 채팅방)
문자 콜택시 서비스
수화 교육 서비스
다른 색깔은 없나요? 이 것은 얼마인가요?
Dagagam
초록색 볼 수 있나요?
다가감
현재위치: 서울시 성북구 정릉 3동
00콜 070-XXXX-XXXX
안녕하세요.
00콜 070-XXXX-XXXX
이 물품은 15000원이에요.
00콜 070-XXXX-XXXX
빨간색과 초록색이 있어요.
00콜 070-XXXX-XXXX
네. 꺼내
00콜 070-XXXX-XXXX 00콜 070-XXXX-XXXX
다가감 Dagagam
Design 서로의 심리적 거리감을 줄이기 위해 따뜻하고 부드러운 느낌을 강조 가시성을 높이기 위해 밝은 색 컬러와 곡선이 강조된 픽토그램을 제작
픽토그램
로고타입
컬러
라운드된 선과 동그란 모양이
‘다가감‛이라는 이름과 어울리도록
따뜻함이 느껴지는 연한 핑크
강조된 픽토그램
부드러운 느낌을 주는 곡선을 사용
핑크를 강조하기 위한 그레이와 화이트
다가감 Dagagam
Output
존마스터스오가닉 John masters organics
Web Design 2014. 11 - 2015. 02 2W 웹디자이너
참여율: 100% http://www.johnmastersorganics.co.kr
존마스터스오가닉 John masters organics
About the Project 오가닉 화장품 브랜드‘존마스터스오가닉’홈페이지 리뉴얼
존마스터스오가닉 John masters organics
Strategy 1. 쇼핑몰 특성상 많은 이벤트를 진행하기 때문에 이벤트 페이지로 연결되는 다양한 경로를 만듬
2. 역동적으로 변화하는 홈페이지의 느낌을 주기 위해 이벤트 주제와 연관된 로고 타입을 제작하고 플래시를 사용해 디스플레이
존마스터스오가닉 John masters organics
Output
공허의 유산: 2. 쇼미더머니 Legacy of the Void: 2. SHOW ME THE MONEY
기획 & UX Design & Programming 2015. 04 - 2015. 05 영상 제어 웹 게임
‘구탁소’ 와‘교역소’에서 전시 참여율: 40%(외 영상작가 1명, 개발자 1명) http://kwonso01.cafe24.com
공허의 유산: 2. 쇼미더머니 Legacy of the Void:
About the Project
2. SHOW ME THE MONEY
2018년에 닥친 제2의 IMF로 인해 금융 위기에 빠진 우리나라. 90년대 중반에 전 국민이 참여했던 금 모으기 운동처럼 이번에도 금을 모아 나라를 구한다. 관람객은 금 모으기 게임을 하면서 작가가 말하고자 하는 것을 ‘체험’할 수 있게하는 영상 제어 게임을 제작
Misson 관객들은 이해하기 어려운 예술 영상을 보고, 자칫 지루함을 느낄 수 있기 때문에 영상을 단순히 관람하는 것이 아니라 참여를 유도해 흥미를 유발시키고 끝까지 몰입할 수 있다록 한다.
Solution 1. 90년대를 대표하는 스타크래프트 게임과 IMF나라사랑 금모으기 운동에 관한 영상을 몽타주 기법으로 편집해 게임에 개연성을 부여 2. 경영 시뮬레이션 게임의 방식을 가져와 관람자 참여를 유도
Concept
유저의 게임 실력에 따라 결말이 달라짐
단순한 조작방식으로 최대한 빨리 영상에 집중하게 함
작품 의도 파악
제한 시간 내 ‘show me the money’ 입력
Strategy
유저의 게임 실력에 따라
단순한 조작방식으로
단계별 난이도 조절을 통해
영상 결말이 달라짐
빠른 영상 몰입도를 제공
사용자의 승부욕을 발동
공허의 유산: 2. 쇼미더머니 Legacy of the Void:
Game Process
2. SHOW ME THE MONEY
1. ‘SHOW ME THE MONEY’를 입력하고 게임을 시작한다.
2. 오프닝 영상과 게임 설명을 관람한다.
3. 9단계의 영상을 감상하며 게임한다.
미션실패
미션성공
공허의 유산: 2. 쇼미더머니 Legacy of the Void: 2. SHOW ME THE MONEY
Output
공허의 유산: 2. 쇼미더머니 Legacy of the Void:
Result
2. SHOW ME THE MONEY
1. 미술계에 많은 영상 인터렉션이 있었지만 게임 형식은 처음이었기 때문에 관람객에게 많은 관심을 불러 일으킴 2. 9분이라는 긴 영상 길이에도 불구하고 끝까지 관람하는 경우가 많았음 3. 영상의 주제에 대해 관람객들의 이해와 공감을 이끌어 낼 수 있었음
‘구탁소’설치 전경, 2015. 05