본문 바로가기

반응형

Design

(38)
프로토파이3.9 밋업 _ 프로토타이핑 실무이야기 Protopie 3.9 Meetuo with Toss,LINE,Kakao,Daylight10월 12일 D.Camp에서 프로토파이 3.9 밋업이 있었습니다프로토파이3.9의 새로운 기능과 각 기업의 실무자들이 어떻게 프로토파이를 사용하고 있는지에 대해 강연했습니다프로토파이는 국내 많은 기업 뿐만 아니라 닌텐도, 구글 등 글로벌 기업에서도 사용하고 있다고 합니다 금융서비스에서 프로토타이핑의 중요성 윤성권 / Toss 토스는 기존에 여러 불편함이 있었던 송금 행위을 '최고의 사용자경험'으로 만들어내겠다는 목표를 가지고 만들어졌다 우리 회사는 모든 화면을 ABCDEFG타입으로 테스트할 수 있는 환경이며 전형적인 애자일 방식으로 일하고 있다 프로덕트 디자이너에게는 서비스에 들어가는 문구, 이미지, 아이콘 하나까지 ..
git-sketch-plugin 사용후기 git-sketch-plugin 이번에 깃헙과 스케치를 연동하는 플러그인이 나왔다는 소식을 접해서 잠들어있던 깃헙을 깨우는 겸 사용해보았다.개인적으로 원했던 기능이 커밋된 지점에서 그 파일을 다시 불러오는 기능이었는데 깃헙 데스크탑엔 그 기능이 없어서 소스트리로 변경!아무래도 인터페이스나 사용 방법이 익숙치 않아 개발자의 힘을 빌어서야 세팅할 수 있었다. 작업을 한 뒤, 깃헙에 올리면 위 그림과 같이 이전, 이후로 작업된 화면을 비교해준다.깃헙을 이제 막 사용해보려는 유저로서 텍스트로만 이루어진 화면에 기 죽으며 끄는 경우가 종종 있었는데,그 허들을 조금 낮춰주는 플러그인이다. 비교 이미지가 생겨서 커밋 지점을 찾기가 훨씬 수월해졌다. 사용해보면서 느낀 불편한 점은 두 가지.1) 내 로컬 파일에서 미리보..
이미지를 폴리곤화해주는 사이트_triangulator 폴리곤이미지 만들기http://somestuff.ru/filter/HTML5/I 폴리곤이미지를 만드는데 손이 꽤 많이 가는 편이다.폴리곤이미지를 손쉽게 만들 수 있는 방법이 있다길래 냉큼 사용해보았다. 튜토리얼은 이 동영상을 보면 되고, 하단에 here 링크를 통해 다운로드받는다. 다운로드 받은 폴더안에 index.html을 열면 위와 같은 것이 열린다. Drop your bitmap here영역에 이미지를 던져넣고 작업을 시작한다. 테스트용으로 만들어본 수달이미지. 이미지를 넣자마자 자동으로 만들어주는 것은 아니고 어느정도는 클릭클릭으로 영역지정은 해야한다.하지만 쉐잎을 자동으로 쪼개주고 밑단에 깔린 이미지를 토대로 그라데이션을 깔아주므로 한땀한땀 그리는 것보다는 훨씬 수월하다.다만 복잡한 사진에는 쉐..
UX&UI 기획 1강 사용자경험(UX)의 개념과 이해사용자경험은 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하게 되는 지각과 반응, 행동 등의 총체적 경험사용자경험을 정의하는 주요 키워드: 사용, 인지와 반응, 인지와 반응의 대상은 제품에 국한되지 않고 서비스와 브랜드 등으로 확장된 포괄적인 개념 사용자경험은 특정 영역을 갖기보다 기존의 다양한 분야와 결합되는 새로운 틀을 제공하는 접근으로 확장되고 있다.단순하게 인터페이스만이 아니라 제품, 시스템, 서비스, 회사 등 사용자가 특정 포인트를 중심으로 경험할 수 있는 대상으로 확장 기본적으로 UX는 사용하는 인간의 감정(느낌)과 생각 그리고 효용에 관한 것을 다룬다. 때문에 UX는 궁극적으로 인간에 종속된 개념이며, 주변의 환경 변화와 맥락, 그리..
UX&UI 기획 11강 UI 스토리보드 작성과 UI 상세설계 가이드 *스토리보드(Storyboard)UX 구현에 수반되는 사용자와 태스크, 인터페이스 간 상호작용을 시각화하여, 개발자/디자이너와의 의사소통을 돕는 도구이자완성해야 할 앱비스와 예상되는 사용자경험을 미리 보기 위한 방법론 기본적으로 그림을 통해서 전반적인 이야기를 전달 *스토리보드의 목적앱 설계에 필요한 조각들을 모아서 순서대로 놓고, 배치해보고, 쌓아서 조립해나가는 과정실제 개발 단계에서 발생할 수 있는 문제점을 미리 발견하고 대처하기 위한 과정 *스토리보드의 활용UX 스토리보드의 작성 프로세스사용자 시나리오를 시각화하면서 평가(사용자경험이 어떻게 전달되는지)하는 과정을 거친다.사용자 Task에 따른 세부적인 기능들 간의 흐름과 관계망을 파악할 수 있다. UX ..
모바일 GUI 기초 3강 서비스 목적과 사용자의 이해1. 서비스의 목적브랜드 서비스, 유틸리티, 콘텐츠 서비스, 게임 등의 속성을 정하고 프로젝트 존재 이유를 명확히 한다.그리하면 기능,구조도 명확히 나오고 구체적인 상황에 효과적인 솔루션을 제공할 수 있게 된다. 2. 카테고리적 특성 파악(1) 쇼핑, SNS 등 카테고리에 따라 사람들이 일반적으로 생각할 수 있는 구조, 레이아웃, 컬러 등의 특성을 결합사용성에 영향을 끼치게 된다.(2) 모바일 특성과 사용자들이 쓰는 환경을 고려한다.예를 들어 김기사 앱과 아이나비 빌트인 네비게이션을 비교하였는데어두운 환경에서는 화면도 어둡게, 밝은 화면에서는 밝은 화면을 제공하여야한다그러나 김기사(리뉴얼전)에는 이러한 것을 제공하지 않아 사용자들이 터널에 들어가거나 하는 상황에서 불편을 겪음아..
모바일 GUI 기초 2강 1. 모바일 구성 요소와 디자인 프로세스프로젝트의 목표 매출 목표 외에도 달성하고자하는 목표(다운로드 수, 긍정적인 리뷰 수 등) 모바일 서비스를 개발/디자인/기획을 하기 위해 기술 이슈, 비용 이슈, 법적 이슈 등 다양한 요소들에 대해서 이해할 필요가 있음 각 요소들을 하나씩 구성하여, 프로젝트가 성공할 수 있도록 각 구성 요소를 이해하고 대응할 필요가 있음 2. UX,UI,GUI 구체적인 사용자에게 어떠한 경험, 콘텐츠, 기능, 디자인을 제공할 것인지 고민하고 적용하는 영역 모바일 서비스를 만드는 데 있어, 누구를 사용자로 할 것이며, 대상에게 어떠한 경험, 콘텐츠, 기능, 디자인을 제공할 것인지를 고민하고 적용하는 영역으로 UX/UI/GUI의 개념을 이해해야 한다. 이론적인 부분은 물론, 실무적인 ..
모바일 GUI 기초 1강 모바일 서비스어플리케이션 / 웹 브라우저로 나뉘며 기술 구현 방식에 차이가 있다. 사용자에게 어떤 접근경로로 다가갈지 우선 판단하여 형태를 결정한다. 그에 맞춰 디자인 방법이 달라진다. 앱이 웹보다 실행속도가 빠르지만 개발비용이 더 많이 든다. 네이티브 앱 애플 IOS : 오브젝티브-C / 스위프트 / X-Code ...구글 Android : 자바 / 안드로이드 스튜디오...디바이스의 다양한 센서, 기능, 프레임워크등을 사용가능하다. 모바일 웹 다양한 해상도대응방식. (원소스 멀티유즈)HTML, CSS,Javascript 등의 언어로 제작한다.그러나 디바이스의 다양한 센서,기능,프레임워크를 사용하지 못한다.보안상의 이유로 하드웨어 및 시스템접근에 제한이 있다. 하이브리드 앱앱과 웹의 장점을 섞어놓은 것...

반응형