UIUX 스터디 10주차 학습일지 02 : 디자이너가 알아야할 개발 지식 - 32

1-1. Product Designer

PM와 PD의 차이점

 

프로덕트 매니저와 프로덕트 디자이너의 공통점

설득을 잘 해야한다 = 의사소통을 잘 해야한다

 

프로덕트가 의사소통을 잘하려면? > 비즈니스, 기획, 개발을 잘 알아야 함

1. Product Orientation (제품의 방향)

2. Holistic Experience Design (총체적인 사용자 경험 디자인)

3. Prototyping (제작 방법)

4. User Testing (사용자 테스트)

5. Interaction and Visual Design (상호작용 디자인과 시각디자인)

 

2-1. Product Dvelopment Process

Waterfall 방식 - 기획단에 적용한 첫 번째 스펙이 최종으로 변경없이 진행되는 방식

Agile lean Process - 가장 최소의 스펙을 기획으로 하고 최대한 빨리 시장에 내놓고 유저들의 반응을 살펴 반복적으로 수정, 기능 개선

5D - 아이디어를 도출(Define)>디자인을 도출(Design)>개발 테스트(Develop)>앱을 사용자에게 유통(Distribute)>사용자 측정, 사용자의 아이디어를 통해 검토, 분석(Distill)

 

2-3. Agile Scrum, Sprint

스크럼모델은 애자일 개발 방법론 중 하나로, 회의를 통해 '스프린트'라는 개발 주기를 정한 뒤, 이 개발 주기마다 회의 때 정했던 계획들을 구현한다. 하나의 스프린트가 끝날 때마다 '스프린트 검토 회의'를 통해 생산되는 프로토타입을 사용자들의 피드백을 받으며 더 나은 결과물을 구현한다.

 

스프린트 주기

 

최종 출시 버전에 대한 스펙을 결정하고, 스프린트 주기를 확정한 다음, Feature1~10 정하고 각 스프린트마다 버전을 개선해나감

스프린트마다 백로그를 정하고, 실제로 사용자들에게 배포할 수 있는 동작이 가능한 상태를 개발한다

서설형의 유저스토리를 적어나감

 

애자일이 왜 워터폴보다 나을까?

단기간에 작동하는 기능을 만들 수 있고, 문제가 생겨도 회복이 빠르기 때문

디자이너에겐 어떤 점이 좋을까?

장점

1) 디자인을 완벽하게 할 필요가 없어 시간이 절약된다

2) 구현 가능한 범위를 빨리 파악할 수 있다

3) 결과를 빨리 파악할 수 있다

단점

1) 전체를 볼 수 없기 때문에 서비스의 전체 경험을 챙기기 힘들다

2) 페이지 안의 기능들 간의 통일성이 깨질 수 있다

3) 개발자들의 패턴에 맞춰야 하는 경향이 있다

> 디자인 가이드를 만들기 매우 불편

 

3-1. User Story

서비스 고객에게 가치를 줄 수 있는 기능을 서술한것

고객 가치에 대해 기술적 전문 용어가 아닌 일상의 언어로 서술한 것

한 두명의 개발자가반나절~2주일 안에구현하고 테스트할 수 있는 정도의 크기

 

Who(Role)-What(Goal)-Why(Benefit)

[사용자 역할]은 [이유/장점]를 얻기 위해 [행위]를 할 수 있다

ex) 고객은 다음번 결제할 때는 정보를 입력할 필요가 없도록 카드 정보를 저장할 수 있다

이를 위해서 소유주 이름, 생년월일, 카드 번호, CVC, 입력창, 필수조건, 에러상태, 에러메시지, 카드정보 데이터베이스, 결제정보 데이터베이스, 카드사 API 등이 필요함

User Story 예시

 

4-1. 디자이너vs개발자

Designer

페이지로 생각하고 시각화하려고 함, 사용자 입장에서 편리한 디자인

Engineer

기능으로 생각하고 시스템화, 최대한 복잡한 기능을 최소화

 

개발 영역

 

엔지니어의 종류

Microsoft의 웹 엔지니어 / Mac,iOS의 iOS 엔지니어 / 구글의 안드로이드 엔지니어

 

4-2. 프론트와 백엔드

API란? = Application Programming Interface

응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 의미한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다

즉, 컴퓨터와 컴퓨터간의 정보를 교환하는 암호를 의미

 

클라이언트가 서버에 요청을 함 (Create, Read, Update, Delete) > api가 다시 요청 함 (Create, Reade, Update, Delete에 대한 서버 주소를 찾음)

 

JSON이란? = Javascript Object Notation

데이터 전달 형식 (key-object), API Request 안에 들어있는 내용물의 형식

 

4-3. Web & App / 반응형 웹 / 하이브리드 앱

반응형 웹

디바이스의 종류와 화면크기에 따라 실시간으로 반영하여 웹페이지를 최적화된 화면으로 구성

초기 비용과 유지관리 비용을 절감할 수 있음

반면 서로 다른 디자인이 한페이지에 표현되어 복잡도 증가

PC를 먼저 제작하고, 태블릿, 모바일을 따로따로 해야 하는 번거로움이 있음

 

하이브리드 앱

웹을 사용하지만 마치 앱을 사용하는 착각을 일으키는 방식, 웹앱의 단점을 보완

크롬, 네이버, 다음

장점

카메라 음성 검색 및 인식 등 스마트폰 자체 기능을 사용할 수 있다

html로 개발되어있기 때문에 개발 및 유지보수가 간단하다

단점

네이티브 앱보다 UI구성 디자인이 취약해 속도가 느리다

기능적인 부분에 제한이 있으며 앱의 성능이 떨어지기도 함

업데이트를 할 때 마다 심사를 받아야 함

 

5-1. 효율적인 디자인을 위한 컴포넌트

웹 디자인시 필요한 기본 요소

이미지, 아이콘, 타이포, 컬러, 레이아웃(그리드 시스템)

 

5-2. Layout Grid System

재료를 올릴 수 있는 뼈대

UI요소를 배치할 때 기준이 되는 시스템

다양한 모니터의 해상도에 대응해야하는 Web 디자인에서 일반적으로 사용

디지털 웹 환경에서는 12-column-grid가 표준

각 디바이스 가로해상도에 맞는 그리드를 활용

 

디자인과 개발 그리드 시스템 구축 과정 차이

 

디자인vs개발 그리드 시스템

 

디자인

위치를 잡고 크기를 잡고 왼쪽 출발점부터 px값을 정함

개발

전제 width를 잡고, 상하는 row로 쌓고, 좌우는 column으로 쌓아서 개발

 

디자이너가 개발자에게 어떻게 그리드 시스템을 전달해야 하는가?

콘텐츠가 차지하는 column수 정하고 gutter 값을 짝수로 정해서 전달 (16px, 20px, 24px, 32px)

 

5-3. Typography/Color/Image/Icon

Typography

픽셀

디스플레이에서 가장 기본이 되는 화면 최소단위

하나의 글꼴이 화면에 출력될 때 그 글꼴이 차지하는 화면 최소 구성요소의 수

 

포인트

타이포그래피에서 사용하는 가장 작은 인쇄 단위

1포인트는 1/72인치를 나타내며, 디스플레이가 생겨나기 전부터 사용하던 단위

 

폰트 두께

나눔고딕, 나눔스퀘어, 노토산스 총 3개의 시스템 폰트를 기준으로 함

텍스트의 두께는 웹 폰트 사용시 로딩 시간을 고려해 최대 4개까지 제한(Light, Regular, Bold, Extra Bold)

 

디자인과 개발 타이포그라피 구축 과정 차이

디자인

폰트 스타일, 색깔, 사이즈, 두께, 자간, 행간으로 조정

개발

폰트 사이즈, 행간을 모든 요소마다 정함

기본 폰트 사이즈를 정하고(base font: 14px), scale로 조정함(1em, 2em, 3em)

각각 폰트마다 네이밍을 함(h1, h2, basefont, small)

 

디자이너가 개발자에게 어떻게 타이포그라피를 전달해야 하는가?

base font size 정하기

웹 서비스에서 사용하고 있는 모든 폰트 크기, 속성 정하기

이름 정하기 (headling, body, h1, h2)

각 페이지별로 사용하고 있는 폰트들을 '이름 명'으로 전달

 

Color

디자인과 개발 컬러 구축 과정 차이

디자인

Color picker를 이용해 색깔을 고름

개발

각 컬러의 variable을 정하고, rgba, hex값을 텍스트로 정리

 

디자이너가 개발자에게 어떻게 컬러를 전달해야 하는가?

사용하고 있는 컬러의 범위 정하기 (red, blue, dark-blue)

Color set을 만들고 이름 붙여주기 (red10, blue100)

전달할 때는 json파일로 만들고, 소통할 때는 "blue-500을 사용해주세요"등과 같이 전달하면 효율적

컬러 json값 예시

 

Image

이미지 확장자: png, jpg

이미지 수정/불러오는 법: 이미지의 저장 위치(URL)을 파악

이미지 최적화: 큰 이미지는 불러오는 데 오래걸리기 때문에 사이즈 조절 필요

 

디자이너가 개발자에게 어떻게 이미지를 전달해야 하는가?

이미지의 목적을 고려해 콘텐츠 비율이 중요한 이미지인지, 백그라운드 이미지인지 나눠서 전달

<image> 태그 사용 > 고유 이미지의 px, 비율 조절하기

배경에 들어가는 이미지의 경우 {backgrond}사용 > 높이값(px) 정하기, 중요한 부분을 가운데로 오도록 이미지 편집

로딩 패턴 고려해서 전달하기(해상도 낮춰서 전달)

 

Icon

확장자: svg, png

svg는 코드로 구현이 가능하기때문에 애니메이션, 사이즈, 색 수정을 할 수 있다

 

6-1. States of UI Design

디자이너가 챙겨야 할 네 가지

데이터의 양 (최소/최대치)

 

데이터의 유무에 따른 상태

 

사용자 과업에 대한 상태

 

사용자 유형에 따른 상태

후원자/방문자, 회원/비회원

 

그 외에 기본적으로 고려해야하는 요소들

Input, Button, Input&Button 합쳐서 모두 생각해야 함