pm/TIL
Chapter 17-02. 고객 경험을 만드는 PM 전략
support_u
2023. 10. 28. 16:16
1️⃣ 개발자와 협업하기
- 개발 환경과 개발자들의 언어를 이해.
- 개발팀과 확장성, 속도, 안전성등을 함께 논의.
- 개발 트랜드에대한 학습
- 공유하고 소통.
- 업무의 완료 시점을 정하자.
🔷 컴퓨터 언어
- 컴파일러 : 프로그래밍 언어를 컴퓨터의 언어로 변경해 줌.
- 운영체제는 하드웨어를 관리(용량 확인, 보조 기억장치 관리) ->각 지원하는 언어가 다름.
| window | Mac, ios | android |
| C# visual basic C++ javascript |
swift objective-C |
java kotlin |
🔷 서버와 클라이언트 관례
- 클라이언트에서 요청(request)을 하면 서버에서 정보를 전달(response).
- 클라이언트 부분을 프로트엔드.
- 서버는 백엔드.
- 서버에서 정한 체계(api :클라이언트의 요청을 서버에서 체계에 맞춰 답을 보내는 규칙)에 맞춰서 요청.
🔷 쿠키, 세션, 캐시
| 쿠키 | - 방문했던 유저들에 대한 정보를 저장하는 방법. - 최대 4KB 용량의 작은 데이터를 저장. - 클라이언트에서 관리/저장. - 보안에 취약 검색 키워드, 쇼핑 카트 항목, 아이디 비밀번호 저장 |
||
| 세션 쿠키 | 쿠키 만료일이 포함 되어 있지 않은 경우. 메오리에 저장, 하드 디스크에는 기록이 남지 않아 브라우저를 닫으면 영구적 손실. 1회성 로그인 |
||
| 영구적 쿠키 | 쿠키 만료일이 포함되어있는 경우. 브라우저를 종료해도 하드 디스크에 기록이 저장됨. 만료일이 지나면 삭제. 자동로그인 |
||
| 세션 |
- 일정 시간 동안 같은 사용자의 브라우저로 부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 유지시키는 기술. - 서버에서 관리/저장. 일정 시간 : 사용자가 웹 브라우저를 웹 서버에 접속한 시점으로부터 웹 브라우저를 종료함으로써 연결을 끝내는 시점. - 지속적인 연결 상태가 필요하기 때문에 서버에 과부하가 걸릴 수 있음. 연장, 임시저장, 사용 들을 일정 시간 동안 안하면 삭제, 웹이 닫힐 경우 삭제 |
||
| 캐시 | - 데이터나 값을 미리 복사. - 웹 사이트에 처음 접속할 때 보다 다시 접속 했을 때 로딩 시간 단축. - 서벌로 데이터에 접근하는 시간이 오래 걸릴 경우나 값을 다시 계산하는 시간이 오래 걸릴 경우 사용. |
||
| 토큰 기반 인증 | - 인증 받은 사용자들에게 토큰을 발급하고 클라이언트에서 토큰을 저장햇다가 서버에 요청할 때 토큰을 함께 보내서 토큰을 검증한 후 요청한 응답을 함. - 사용자의 인증 정보를 서버나 세션에 유지하지 않아도 됨. - 사용자가 로그인 유/무를 신경쓰지 않아도 됨. - 쿠키를 전달하지 않아 보안의 취약점이 사라짐. |
||
🔷 웹 접근성과 접근 권한의 차이
| 웹 접근성 | 접근법 준수 가이드(장애인 차별 금지법) - 인식 용이성 : 모든 사용자가 인식 가능(컨텐츠 명도 채도 가이드 라인 ) - 운용의 용이성 : 인터페이스 구성 요소가 조작 가능. (tap 키로 이동 시 어떤 순서로 이동할 지) - 이해의 용이성 : 누구든지 이해하기 쉽게 구성. (키보드 만으로 이동 가능) - 견고성 : 미래에도 이용 가능하게 코드 작성. |
| 웹 접근 권한 | 정보 및 설치된 기능에 접근하여 해당 정보를 읽고 수정하거나 기능을 실행할 권한 - 필수 권한 : 서비스에서 필수적으로 필요한 특정 데이터/기능을 접근할 권한. - 선택 권한 : 앱 실행에 반드시 필요한 기능을 아니지만 정보 활용에 제약이 있을 수 있는 경우. |
2️⃣ 디자이너와 협업하기
- 요구사항 전달
- 추구하는 목적
- 필요 기능
- 고려해야하는 제약
- 요구사항은 개인적 견해가 안됨.
- 개발과 디자인 사이에서 디자인 결과물이 정해진 리소스와 일정 안에서 가능한지 항상 고려하고 교통정리.
- 시스템 상황 변경에 대한 표현도 디자인이 되어야 함(에러, 네트워크 단절)
- 결과물이 의도와 다를 경우 선 경청/후 협의 후 의도를 파악.
🔷 디자인
🔸색상
primary color/ service identitiy color : 메일컬러, 키컬러, 브랜드 컬러
color pallet : 사용하는 컬러를 어떨때 사용할 것인지
| GUI disign guideline | 정의 |
| Typograophy | 색상, 폰트 등의 정의. |
| Layout guideline | 아이콘과 UI 정의(기능, 활성화 시 정의). 제플린, 피그마 등 tool을 사용. |
| 디자인 시스템 | 디자인 시스템 정의. 아이덴티티와 확장시에도 일관적인 디자인을 위해 사용. 반응형에서 나타나는 화면도 정의. 기획, 디자인, 개발 시 생산성 향상. - 스타일 가이드(폰트, 컬러 파렛트), 컴포넌트 라이브러리(공통된 스타일), 네이게이션.. |
🔷 이미지 파일 종류와 특성
| 파일 | BMP | GIF | JPEG | PNG | SVG |
| 속성 | Lossless indexed and Direct |
Lossless indexed only |
Lossy Direct |
Lossless Direct |
Lossless Vector |
| 특징 | 파일 사이즈 큼 오래된 파일 형태 |
무손실 압축 256 색상 |
손실 압축 방식. 수천가지 컬러팔레트. |
수천가지 컬러팔레트. 무손실 압축. 파일 사이즈 큼. |
라인과 곡선으로 구성. 파일 사이즈는 작지만 구성이 따라 다름. |
| 활용 | 윈도우 or 초기에 사용. | 애니매이션, 투명한 것 표현. 로고나 선을 그리기 적합. |
적은 파일사이즈와 좋은 퀄리티 표현. 사진이나 그라데이션 표현에 좋음. |
alpha transparenct 지원, 일부 영역 투명 처라 가능. 아이콘, 배너같은 영역파일에 활용. |
애니메이션 적용 가능. 다양한 해당도 대응 가능. flat&simple 디자인에 적합 반응형에 적합. |
🔷 디자인 용어
🔸 Affordance
사용자들에게 사용법을 알려주지 않아도 자연스럽게 사용하기 좋은 디자인
조건이 만족하는 경우 활성화
3️⃣ 모바일 플랫폼 가이드라인
🔷 Android와 ios의 차이
| Android | ios | |
| Default button | 백, 홈, 메뉴 버튼 제공. | 홈 버튼만 노출. |
| navigation | 하단에 프라이머리 메뉴 정의 하위 메뉴는 상단 햄버거 버튼에 제공. |
하단에 프라이머리 메뉴 정의 하위메뉴는 하단에 ...버튼에 제공. |
| UI control | call to action 버튼 - FAB control 우측 하단 - Search dncmr 우측 상단 title과 이전 버튼 아이콘 |
call to action 버튼 - FAB control 우측 상단 - Search dncmr 우측 하단 title과 이전 버튼 아이콘, 힌트 |
| visual design | 그림자 효과로 depth를 활용. 아이콘. Dialog text alignment - 질문을 좌측 - 선택을 우측 X 버튼은 지양 |
모노톤의 조합으로 flat하게 디자인. 아이콘(공유가 특히 다름). Dialog text alignment - 질문/선택중앙 X 버튼은 지양 |
| motion | page refresh - 위에서 아래로 움직임. |
page refresh - 아래로 내려가고 새로고침 아이콘이 돌아감. |
🔸 왜 알아야해?
- 사용자에게 익숙한 사용환경 제공
- 개발 효율성, 시간 절약(개발 소스(api)를 가져올 수 있음)
- 마케 등록 거절 사유를 제거와 추가적인 개선을 없앨 수 있음
4️⃣ 실무에서 활용하는 심리학
🔷 장점
- 사용자들이 예측 하고 사용 가능
- 학습시간 단축, 에러 발생을 낮춤
- 의사결정에 드는 시간을 단축
- 인지고부하률을 낮춤.
| 이론 명 | 정의 |
| 선택의 역설 | 불필요한 여러가지 선택을 주는 것보다 정말 필요한 선택지만 심플하게 제공. 많은 선택지는 오히려 인지 부하가 요구된다. 보통 4~5개만 제공하는 것이 최적화된 개수. - |
| 1. 현재 페이지의 목표와 관련 있는 정보인지를 사용자가 쉽게 알아볼 수 있도록 맥락 또는 단서를 제공. 2. 사용자의 목표에 도움이 되는 primary button을 제공하여 선택지를 줄임. |
|
| 아마존에서 비교 가능한 유사한 상품을 제공. 트위터 메인화면에서 보이는 선택지를 2개로 줄임으로써 인지 과부화를 줄임. |
|
| 본 레스토프 효과 | 유사한 속성 중 특이한 한가지만 기억할 가능성이 큼. 중요한 정보나 핵심 동작은 시각적으로 눈에 띄게 해라! |
| 1. 명확한 목적이 있을때 사용. 2. 시각적 요소를 강조할 때 다른요소와 경쟁하지 않도록 제한. 3. 배너처럼 보이지 말게하자(쉽게 무시함) 4. 색상에만 의존하면 색맹에겐 주목하기 힘들기 때문에 고려하자. |
|
| 에어비앤비에서 예약 요청 버튼을 특이하게 만듬. ios에서 돌이킬 수 없는 경우 빨간색. 인기있는 요금제의 버튼을 다르게 함. 메시지 어플에서 안 읽은 메시지를 빨간색 원안에 숫자로 표시. |
|
| 밀러의 법칙 | 인간이 덩어리화(chunking)를 활용해 정보를 효과적으로 암기. |
| 휴대폰 번호를 4개씩 -을 넣음. 넷플렉스 타이틀 별 순위표시. 나이키에서 카테고리화, 선택화. 블룸버크 각 목적에 맞는 카테고라이징. |
|
| 서열 위치 효과 | 목적의 중간 위치항목보다 처음과 끝에 위치한 항목을 더 잘 기억. |
| 피크엔드 법칙 |
인간은 경험 전체의 평균이나 합계가 아니라, 결정의 순간과 마지막 순간에 느낌 감정을 바탕으로 경험을 판단하는 경향이 있음. 긍정적인 순간보다 부정적인 순간을 더 생생히 기억. |
| 우버, 카카오T에서 기다리는 택시의 위치와 이동 현황을 볼수 있는 서비스. 메일침프에서 메일 작성 시 사용자의 감정을 생각하여 애니메이션을 띄워줌. |
5️⃣ 협업 툴
🔷 Jira
- WBS를 작성해주는 툴.
- 칸밤보드를 제공하여 업무의 흐름을 파악할 수 있음.
- 백로그에 이슈를 작성 후 요구사항과 할당을 함.
- 리얼타임 데이터를 볼 수 있음.
- 투명하게 실무자의 역할과 임무를 분명히 함.
- 정체 구간을 확인할 수 있음 -> 문제를 빠르게 진단하고 해결.
- 이슈 해결에 대한 히스토리가 남기 때문에 비슷한 이슈발생 시 참고.
🔷 기획서/GUI PPT 문서
🔸 기존 문제점
- 실시간 수정사항을 확인할 수 없음.
- 문서 내에서 커뮤니케이션 불가능.
- 해상도가 맞는지 확인하기 어려움.
- 공간적인 제약, 한 화면내에서 workflow를 모두 담기 어려워 파악에 제약이 있음.
- 수정사항 대한 공수가 많이 발생.(부모를 수정 시 자식을 따로 수정)
- 이슈사항 관리를 위한 별도 문서나 히스토리 페이지, 수정 tag등 필요
- 기획 수정사항이 있을 경우 waterfall 방식으로 진행되어 빨리 수정이 어려움.
🔸 사용 툴
| 툴 | 난이도 | 지원 | 비용 | 특징 |
| Slack | 쉬움 | web, app | 무료~별도요금제 | project communication tool - 조직/프로젝트별 채널 생성 - @맨션 - 파일 공유 - 확장성 : 구글 캘린더, 드리이브, zeplin, sketch, figma, abstract 등과 연계 |
| Balsamic | 쉬움 | web, mac | 30일 무료 프로젝트 개수별 차등 |
다양한 platform prototype 제작 가능 |
| Invision | 쉬움 | web, mac | 30일 무료 프로젝트 개수별 차등 |
prototyping tool, co-work tool - 각 화면의 진행상황 구분, 온라인 피드백 가능 |
| Sketch | 중상 | mac | 1개월 무료 이후 연 99달러 |
vector design tool 1. target device, os 환경에 맞는 디자인 환경 세팅. 2. 반복 요소를 symbol로 만들어 스타일 공유하여 공동작업 가능. 3. 협업하기 용이함. 4. plug-in이 개발되고 있어 확정성이 뛰어남. 5. 모바일 디바이스에서 결과 확인 가능 |
| Abstract | 중 | web, mac | 30일 무료 이후 월 9달러 |
Collabortion tool, 버전, 히스토리 관리 Branch : 동시에 분업 작업 가능 Merge : 하나의 파일로 합치기 Real time : 최신 결과물 Version관리 : 히스토리를 저장하고 복원가능. Communication : 맴버들끼리 comment 가능. |
| Zeplin | 하 | web, mac | 30일 무료 이후 월 6~12달러 |
디자이너와 개발자 업무를 효율적으로 바꿔주는 툴. 1. 자동 스타일 가이드. 2. 개발 코드 제공. 3. comment로 커뮤니케이션 가능. |
| Figma | 하 | web, mac, app | 30일 무료 이후 월 12~45달러 |
1. PC OS 환경에서 독립적. 2. 온라인에서 작업이 가능. 3. 공동 작업이 가능. 4. Feedback을 남길 수 있음. 5. Prototype제작 가능 6. 자동 저장과 버전 관리. |
6️⃣ 추천 사이트와 도서
🔷 Article
🔷 디자인
🔷 도서
- OKR 전설적인 벤처투자자가 구글에 전해준 성공 방식
- data-driven ux
- .UX/UI 10가지 심리학 법칙
- 비전공자를 위한 이해할 수 있는 IT 지식
- 조직을 성공으로 이쓰는 프로덕트 오너
- 처음부터 다시 배우는 서비스 디자인 씽킹