Song 🎨

디자이너의 든든한 근거, 데이터예전에는 디자인을 할때는 예쁘게 만들면 된다! 라는 생각을 가지고 있었다. 하지만 이제는 사용자의 경험을 설계하는 디자인으로 기업의 매출과 관계된 전반적인 영역까지 확장되는 상황을 보고  지금의 웹/앱 디자인에서 가장 중요한 것은 수집한 데이터를 바탕으로 얼마나 더 나은 해석을 하느냐가 되었다. 버튼을 어디에 배치하는지, 버튼의 모양을 어떻게 할지, 크기는 어떻게 해야할지 같은 시각적인 의시결정에도 데이터는 지대한 영향을 미친다. 처음에 '데이터' 라는것만 들었을때는 복잡한 그래프, 수치만 있는 것은 생가하고 겁을 먹었지만 꼭그것만 있는것은 아니였다. 실무에서 활용하는 데이터는 크게 정량적 데아터와 정성적 데이터로 나눌 수 있다. 각 데이터의 용도와 성격은 각각 다르다. *..

작업을 하다보면 서로 언어를 이해하지못하거나 어떻게 설명을 해야할지몰라 난감한 경우가 있다. 그래서 그런 문제를 조금이라도 보완 하고자 한다. 난생처름 방문하는 웹사이트 또는 모바일 앱에서도 아마 여러분은 원하는 정보를 찾으려면 어디로 가야할지 대략 감이 올것이다. 호텔예약 앱,커머스 앱, 금융 앱처럼 각 서비스 측 가능성을 멘탈모델(Mental Model) 이라고한다. 사용자 경험을 설계하는것은 무에서 유를 만드는 창작 활동과는 다르다. (디자이너는 예술가가 아니다) 사람들에게 익숙한 경험을 통해 직관성을 높여야한다. 만약 지나치게 창의적이거나 관습을 무시하고 UI를 디자인 한다면 사용자는 이를 낯설게 여길 것이다. 이를 '멘탈 모델 부조화 (Memtal Model Discordance)가 일어났다'고..

효과 적인‘유저 스토리’ 작성법와이어 프레임 제작이 끝났다면 이를 개발자에게 효과적으로 전달을 해야 한다.이럴 때 유저 스토리라는 설명 방식을 알아두면 좋다.유저스토리란 개발에서 ‘요구사항’이라는 것을 ‘요구사항’이라고 부르는 시스템의 기능 설며을 ‘사용자 관점에서 이야기하는 것’을 말한다.서비스를 만들다 보면 다양한 태스크 (Task)가 생기는데 이를 유저 스토리로 작성해두 면 개발자와 완성도 높은 커뮤니케이션을 할 수 있다.(Task: 작업 단위의 실행 단위이며, 비슷한 용어로는 프로세스,경량 프로세스,스레드,스템요청,쿼리가 있다_출처 위키백과)예시.{사용자}는 {테스크}를 수행할 수 있다.인스타그램 하이라이트에 사진을 추가하는 예시를 통해 유저 스토리 작성법을 살펴보자.1. 인스타그램 입을 켠다.2..

앱은 개발 방식에 따라 크게 네이티브 앱, 모바일 웹앱, 하이브리드 앱이 있다. (개발 방식에 따라 디자인이나 기획 방향에도 영향을 미칠 수 있어 개념의 구별을 아는 것이 필요하다.)네이티브 앱보통 엡 (Application)이라고 부르는 모바일 서비스로, 하나의 운영체제에서만 동작(안드로이드나 혹은 iOS)하며, 가장 대중적인 모바일 개발 형식이다. (고성능 게임이나 카메라, GPS 등 센서를 활용한 앱 제작에 많이 활용된다.)장점: 사용자 기기에 저장된 사진, 카메라, 캘린더, 주소록에 접근 권한을 가질 수 있음단점: 사용자가 직접 앱을 다운로드해야 하기 때문에 실시간 업데이트가 필요하다.모바일 웹앱사파리나 크롬 같은 인터넷 브라우저에서 실행되는 웹사이트.웹앱으로 사용자 확보 후 네이티브 앱을 개발하..

챕터 04 픽셀 밀도와 선명도의 상관관계픽셀은 화면의 선명도에 영향을 준다. 이처럼 픽셀의 많고 적음을 가리켜 ‘픽셀의 밀도’라고 한다. 픽셀 밀도는 같은 면적안에 픽셀이 얼마나 있느냐에 따라 달라진다.픽셀이 들어가는 최소면적의 기준은 1인치 (2.54cm)로 정해져있다. 이 단위를 가리켜 픽셀밀도 혹은 ppi(pixel per inch)- 화면 크기에 따른 픽셀 밀도 차이화면의 크기가 커지면 픽셀의 밀도도 높아져야하는것은 아니다. 웹에서 1인치당 최소 픽셀수를 72ppi로 설정한것처럼 육안으로 감지할 수 있는 픽셀 밀도와 한계때문이다.위 부분은 제조사가 정해둔 디바이스별 시청거리와 관련이 있다.(어떤 기기를 사용하는지에 따른 시청거리의 인식기준이 있어 해당부분을 호고려해야한다.)- 픽셀의 다양한 표현방..

챔텁 03 해상도의 단위와 원리 이해하기해상도 = 화질, 화소해상도를 제대로 이해하기 위해서는 ‘픽셀’의 계념을 알아야 한다. 픽셀 (Picture Element) 화면 또는 이미지에 쓰이는 최소 단위. 1. 파일 형식: BMP GIF JPG PNG = 비드 맵(Bitmap) 방식이라 한다.2. 픽셀 하나하나에는 색 정보 (red green blue)와 투명도가 둘 어가 있다, 따라서 이미지 크기와 용량이 비례한다.3. 가로 세로 픽셀을 곱하면 화면의 총 픽셀 수가 되는데, 이 수가 높을수록 선명도가 높음을 뜻한다. 목적에 맞는 해상도 설정디자인에서 규격은 결과물과 깊은 관계가 있다.(예: 광고 포스터와 책을 제작할 때 종이의 규격이 다르듯이 해상도 역시 무엇을 만들고 어떻게 전달할 것인가에 따라 달려져..

챕터 02  ux작업 진행시 유용한 용어정리MVP(minimum viable product)최소한의 자원,인력으로 시장에서 검증해 볼 수있는 버전의 제품. *최소 기능제품W3C웹 표준(www) 표준을 장려하는 조직 (HTML/XHTML/CSS) 과련 기술의 표준을 담당한다.피처 (feature) : 기능단위 (3-1.핵심기능(키피처)_key feature,) (3-2.너무 많은여러기능이 들어가있는경우(피처크립)_feature creop)액세 빌러티(accesbility) 접근성 W3C에서 관리하고 있다가이드라인 (guid line)기준 혹은 지침을 뜻한다. (구글 머티리얼디자인이 대표적이다.)VOG (voice of custumer)사용자의 리뷰 사용성을 개선할때 중요한 요소이다.테스크(task)사용자가..

챕터 01. UI.UX 제대로 이해하기UI: = visual desigen  UX: 어떤 서비스에 관련된 상호작용 (기능적 or 감정적) *감정적의 요소* 1. 베경 (발생한 시간,장소 같은 구체적인경험 시각적인 색상/폰트/사용자에게 필요한정책) 2. 요인 (해당배경으로 어떠한 행동을킴) 3. 행동방식 (사용자기 인식 후 버튼을 누르거나 특정행위를 하는경우) 4.내적욕구 (사용자기 필요로해서 하는내적욕구) 5.정서적 반응 (대상에 대해서 갖는 인지적,정서적 반응) *좋은 UX란 무엇일까* 1. UX를 창의적인 관점으로만 바라보면 오히려 사용성을 떨어뜨리는 경우가 발생한다. 2. 대부분의 서비스와 제품은 관습을 바당으로 디자인 되어있다.(ux영역에서 관습이란 오랜시간 쌓아온 사용자의 행동패턴의 축적이다.)..