0420 #39 고객 경험을 만드는PM 전략 (4)

4/20 목

• 강의 Chapter 17. 고객 경험을 만드는 PM 전략
• 과제 2
• 아이데이션 스터디

---

 

개발자와 협업하기

개발 언어를 습득하는 것보다 필요한 개발 환경에 대해서 익히는 것이 더 중요

 

인테리어로 예를 들면 PM은 사장님

개발자들은 시공팀

이들이 사용하고 있는 용어와 역할을 알아야 업무를 관리감독할 수 있다

 

프로그래밍 언어

이진법으로 대화하는 컴퓨터가 이해할 수 있게

컴퓨터의 언어를 통역해 주는 역할이 컴파일러

 

코딩을 한다는 것은 컴퓨터한테 업무 지시를 하기 위한 설명서를 작성하는 것

 

운영체제

운영체제는 하드웨어를 관리, 프로그램 설치 실행 관리

각각 지원하는 언어가 다르므로 언어에 맞춰서 개발해야 된다

 

서버와 클라이언트

요청 - 클라이언트 / 응답 - 서버

서버와 클라이언트 사이에서는 무수한 요구사항들을 주고받는다

이 요구사항들이 체계를 갖춰야 원활하게 통신 가능

 

체계화해서 정보들을 주고받겠다고 규정한 것이 API

 

쿠키

사용자들에 대한 정보를 저장, 최대 4kb 용량, 하드웨어에 저장

보안에 취약

 

클라이언트에서 서버에 정보 요청

서버에서 식별 후 응답할 때 쿠키 실어서 보낸다

 

세션 쿠키 : 브라우저를 닫으면 영구적으로 손실, 쿠키에 만료일이 포함되어 있지 않은 경우

영구적 쿠키 : 브라우저를 종료해도 하드 디스크에 남고 만료시기가 되면 삭제된다

 

세션

일정 시간 동안 상태를 일정하게 연결 유지 해주는 것

보통 30분으로 설정

 

쿠키와 다르게 서버에서 관리

 

서버에서 클라이언트를 구분하기 위해 세션 아이디를 발급

서버는 계속 세션 아이디를 식별하고 갖고 있고 관리해야 돼서 서버에 과부하가 걸릴 수 있다

브라우저가 종료되면 인증 상태가 끊킨다

 

캐시

데이터, 값을 미리 복사해서 저장

웹 사이트에 접속했을 때 로딩 시간이 단축되는 이유

정적인 자산 위주로 저장

 

토큰 기반 인증

간편 로그인

인증받은 사용자들에게 토큰 발급하고

클라이언트에서 토큰을 저장했다가 서버에 요청할 때 토큰을 함께 보내고

토큰 검증 후 요청한 응답

 

웹 접근성 준수 가이드

인식, 운용, 이해의 용이성과 견고성을 갖춰야 한다

 

앱 접근 권한

스마트폰 내에 저장되어 있는 정보 및 설치된 기능에 접근하여

해당 정보를 읽고 수정하거나 기능을 실행할 수 있는 권한

 

개발자와 협업할 때

• 개발 환경과 개발자들의 언어를 이해하기
• 개발팀과 확장성, 속도, 안정성 등을 함께 논의하기
• 개발 트렌드에 대한 학습하기
• 공유하고 소통하기
• 업무의 완료 시점 정하기

 

디자이너와 협업하기

색상

프라이머리 컬러, 서비스 아이덴티티 컬러

브랜드를 빠르게 식별하고 상징적으로 인식할 수 있게끔 도와주는 컬러 / 네이버 = 초록색

 

GUI Design Cuideline

전체적인 일관성을 유지하기 위해 스타일을 맞춰야 한다, 이 스타일에 대해서 정의한 문서

• Color Pallet
• Typography
• Layout guideline, UI guideline + icon style 정의

 

디자인 시스템

구글의 머티리얼 디자인 가이드라인, IOS의 휴먼 인터페이스 가이드라인

반응형 화면에 대한 정의도하고 있고

OS 가이드라인뿐만 아니라 각 프로덕트에서도 정의하기도 한다

 

디자인을 다르게 할 경우 하나의 서비스지만 일관성이 깨지는 디자인이 된다

 

크게 스타일 가이드, 컴포넌트 라이브러리 두 가지로 분류하고

스타일 가이드는 타이포그래피, 컬러, 간격 등 전반적인 디자인에서 사용될 요소들에 대한 스타일 정의

컴포넌트 라이브러리는 버튼, 리스트타입, UI, 모션, 접근성 등에 대한 정의

 

디자인 시스템이 필요한 이유

효율성, 일관된 UI, 생산성

 

국내 대표적인 디자인 시스템

토스의 TDS

 

이미지 파일의 종류와 특성

Lossless 손실 없는, Lossy 손실되는

Indexed Color 제한된 색상, Direct 무수한 색상으로 특징 구분 가능

 

• BMP
  • Lossless / Indexed and Direct
• GIF
  • Lossless / Indexed
• JPEG
  • Lossly / Direct
• PNG
  • Lossless / Direct
• SVG
  • Lossless / Vector

 

Affordance

사용법을 알려주지 않아도 자연스럽게 행동할 수 있게끔 유도

 

좋은 Affordance 케이스

= 조건이 만족할 때 버튼 활성화

 

나쁜 Affordance 케이스

= 구매 버튼의 색상이 회색(인식하기 어려움)

 

디자이너와 협업할 때

• PM은 요구사항을 전달한다
  • 목적, 기능, 제약
  • 디자인은 디자이너에게 맡기기
• 개발과 디자인 사이에서 결과물이 정해진 리소스와 일정 안에서 가능한지 항상 고려
• 시스템 상황 변경에 대한 표현도 디자인돼야 한다
• 디자인 결과물이 의도와 다르게 됐을 경우 디자이너의 철학, 관점 물어보고 의도 파악하기

---

아이데이션 스터디