블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Recent Comment

디자인이라고 말하면 일반 개발자들은 포토샵과 일러스트레이터를 다루는 그래픽 디자이너를 생각하게 된다. 하지만 특정 도메인을 표현하는 제품 입장에서 디자이너와 함께 일하기 위하여 일반적으로 기대하는 수준은 사뭇 다르다. 나 또한 B2B 솔루션을 3개 정도 런칭해 보았지만 일반 그래픽만 다루던 디자이너와 일했을 때 도메인 컨텍스트를 이해시키고 설득하는데 많은 시간과 노력 그리고 스트레스를 어떻게 받게 되었는지 잘 안다. 어떻게 하면 훌륭한 디자인을 할 수 있는지? 자신의 Golden Path는 어떻게 만들 수 있는지 알아보자 



프러덕트 디자이너가 작업전 알아야 할 것은?

  - 프러덕트 디자인을 하기전 디자이너는 회사의 미션과 비젼을 알아야 한다 (참조)

  - 프러덕트의 아키텍쳐를 알아야 한다 

    아키텍쳐는 기술적 표현보다는 좀 더 추상화되고 구조화된 표현이다 

    

   + Facebook 예

   

  + 구조화된 표현

   



프러덕트 디자인의 접근법

  - 디자인시 4개의 층이 있고 Top->Down으로 접근한다 

  - Outcome -> Structure -> Interaction -> Visual

    최종 결과물의 모습 : 우리가 해결하길 원하는 사람들의 문제는 무엇인가? 서비스(프러덕트)를 정확히 정의한다 (서비스 참조)

    레이아웃 구조 : 의도한 시스템 구축을 위해 필요한 컴포넌트와 그들의 관계에 대해서 맵핑하는 디자인을 한다  

    화면 상호작용 : 애니메이션효과 화면전환의 흐름등의 상호작용을 자세히 디자인한다

    시안의 시각화 : 아름다운 그리드, 색감, 타이포그라피, 아이콘등의 look and feel의 아름다움을 디자인한다 

  



2013년 트랜드인 Flat Design 관점 

  - 애플 iOS7에서 플랫디자인을 선보이고, 구글은 전사 서비스를 플랫디자인으로 도배하고 있다. 

  - 프러덕트 디자이너가 Visual 단계에서 바라본 플랫디자인의 요소 5가지 (참조)

     + Use of simple elements 

        심플한 아이콘 : 사각, 원형의 단순 모형에 배치, 컬러, 형태로 표현 -> 사용자가 UI 를 쉽게 인식하고 사용토록 만든다 

     + Absence of depth 

        배제된 효과 : 그림자, 입체감, 그라데이션등의 현실감있게 하는 3D적 효과를 배제하여 직관적으로 만든다  

     + Typography

        타이포그래피 : 화려한 폰트를 배제하고 간결한 폰트를 사용한다. 예) 산세리프 

     + Color

        단순한 칼라 : 2~3가지 또는 5~6가지의 색상만을 사용하여 간결하고 과감하고 표현한다. 핑크, 그린, 블루가 대세  

     + Minimalism

        미니멀리즘 : 미니멀리즘과 부합 - 간단하고 심플하게 표현으로 다양한 웹, 모바일에 적응이 쉽다  

    



서비스 디자인이라는 관점

  - 서비스을 만들 때 우리는 어떻게 접근하여야 할까 단지 디자인이 문제가 아니라 UX라는 사용자 경험을 고려하여 사람과 컴퓨터의 상호작용을 생각해 보아야 하고, 우리가 만들려는 프로덕트나 서비스에 어떻게 녹아 있어야 하는지 연구하고 새롭게 창조하는 과정에 대해 알아보자 

  - 서비스 디자인 이란 무엇인가? - 개념 이해


  - 서비스 디자인을 어떻게 하는지 알아보자 - 접근 방법 


- 서비스 디자인 프로세스 
  Discover -> Define -> Develop -> Deliver

  



InfoGraphic 에서 바라본 디자인 관점 예  

  - 정보를 시각화 하는 인포그래픽에 대한 접근법은 어떻게 될까? 10단계에 대해 알아보자 (참조)

  1) 자료 모으기 - Gathering Data

  2) 모든 것을 알기 - Reading Everything

  3) 서사구조를 찾아내기 - Finding the narrative

  4) 문제를 확인하기 - Identifying Problems

  5) 계층을 만들기 - Creating Hierarchy

  6) 뼈대를 만들기 - Building a Wireframe

  7) 표현형식 고르기 - Choosing a Fromat

  8) 시각적 접근법 결정하기 - Determining a Visual Approach

  9) 개선과 시험 : Refinement and Testing

  10) 세상에 출시하기 : Releasing into the World 

  


  - 프러덕트 디자이너 관점에 인포그래픽을 바라 본 다면 다음과 같이 나눌 수 있지 않을까 개인적으로 작위적 분류를 해본다 

     (특성상 상호작용은 제외함)

     1) ~ 4) == OutCome

     5) ~ 6) == Structure

     7) ~ 9) == Visual 

  - 서비스 다지안 관점에서도 작위적으로 분류해 본다 

     1) ~ 4) == 탐색 

     5) ~ 6) == 정의 

     7) ~ 9) == 만들기

     10) == 출시하기  



프러덕트 디자인을 한다는 것은 이제 예전의 단순 그래픽 디자인에서 -> 결과물(프러덕트)의 전반적인 미션과 비젼을 이해하고 -> 어떻게 사람과 컴퓨터가 상호작용해야 하는지 이해한 후 사용자 경험을 극대화 하는 작업으로 변하였다. 최근은 모바일기기의 확대로 그 경험의 비쥬얼에 플랫디자인이 대세를 이루고 있으며 이는 사용에게 궁극적으로 감정적 만족감과 행복감을 주는 방향으로 가고 있다.



<참조> 

  - 원문 : 디자인의 드리블화 

  - 플랫 디자인의 특징

  - 몇가지 플랫 디자인 예들

  - 놀라운 인포그라픽을 만드는 10단계

  - 빅데이터 관점의 서비스 디자인

  - HCI Cousera 강좌 : Human Computer Interaction

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식