[제로베이스 PM스쿨 18기 학습일지 #22] Ch 17.중간점검:고객경험을 만드는 PM 전략 - 개발 플랫폼 특징 및 플랫폼 출시 기준, 협업 하기, 모바일 플랫폼 가이드 라인

개발 플랫폼 특징 및 플랫폼 출시 기준

🖥️ Web vs App 특징

📱모바일 플랫폼 개발 환경

01. [Native App]

안드로이드 앱은 google play store에서 iOS 는 앱스토어에서 다운로드 가능하고 해당 0S에서만 실행 가능

장점

• 다양한 네이티브 기능과 UI를 모두 이용할 수 있음
  ex) 카메라, 마이크, GPS, 스와이프 체스쳐
• 가장 빠르고 안정적이며,반응이 빠른 ghks경을 제공

단점

• 해당 OS에서만 다운로드 실행 가능
• 수정사항 발생 시 입을 업데이트 배포
• 해당 플랫폼에서 요구하는 언어의 제약이 있음

언제 유용할까?

• 필수로 사용되어야 하는 플랫폼 기능이 있는 경우
• 앱 기능이 많고 복잡한데 성능이 뒷받침이 되어야 하는 경우

02. [Web]

브라우저에 URL만 입력하면 어떤 디바이스에서도 동일한 내용을 확인 가능

장점

• 어떤 플랫폼에서든 동일한 콘텐츠
• 개발을 할 때 다른 방식보다 휠씬 적은 시간과 비용
• 빠르게 최신의 내용으로 업데이트 가능

단점

• 디바이스에 대한 접근 권한이 없기 때문에 모바일 0S에서 제공하는 활용할 수 없음
• 네이티브, 하이브리드 앱보다 실행이 까다로움
  (브라우저를 열고 검색 또는 URL을 입력해서 접근)

언제 유용할까?

• 다중 플랫폼 지원이 필요한 경우, 많은 사용자들이 다양한 채널에 동시 접속 할 때 동일한 서비스를 제공하는 목적일 경우
• 콘텐츠가 빈번하게 변경될 경우

03. [Hybrid App]

'네이티브앱 + 웹앱', 네이티브 앱에 웹뷰를 띠워 웹앱을 실행시키는 형태

장점

• 네이티브API 와 브라우저 API를 이용한 다양한 개발이 가능
  Native app과 유사한 UI가능. 스마트폰 제어 가능(카메라, 마이크, 지문 인식 등)
• 크로스 플랫폼 대응이 가능
  유지보수가 네이티브앱에 비해 쉬움

단점

• 복잡한 Navigation에서는 동선 문제 발생
• 네이티브 기능에 접근하기 위해서는 네이티브 개발 지식이 필요하다

언제 유용할까?

• 다중 플랫품 지인이 필요한 경우, 많은 사욕자들이 다양한 채널을 통해 동시 접속할 때 동일한 서비스 제공하는 목적일 경우
• 콘텐츠가 빈번하게 변경될 경우

04. [적응형 웹](Adaptive Web)

• 데스크탑 버전과 모바일 버전의 사이트를 각각 제작해 운영
• 주소 앞에 'm'을 붙인'모바일 웹 페이지
• 웹 페이지를 수정할 경우 각각 htm|과 css를 두 번 수정
• 작업이 중복 ⇨ 비효율적이고 버그가 생길 수도 있음

05. [반응형 웹](Responsive Web)

• 하나의 소스 코드로 모든 스크린에 최적화된 웰 사이트를 구축할 수 있는 방법
• 브라우저의 가로 넓이에 '반응'하여 구성 요소가 변하는 기술
• 디바이스 해상도에 유연하게 반응하고, 어떤 기기에서도 동일한 콘텐츠를 볼 수 있어 일관성을 확보
• 서로 다른 기기의 넓이에 따른 CSS를 추가로 코딩
  하나의 넓이로 작업하는 것보다 더 많은 코드가 필요하고 초기 작업 시간이 오래 걸림

🌵 개발 플랫폼 정의 기준

• 서비스의 목적
• OS에서 제공하는 기능 활용도
• 콘텐츠 변경 주기

🤔 플랫폼 출시 순서를 정할 때 고려하는 점

• 내부 디자인과 개발, QA 리소스 고려
  동시 오픈하더라도, 일정 간격 두는 걸 권장
• 출시 국가에서의 OS 시장 점유율 고려
• Target User가 선호하는 OS 먼저 출시

---

개발자와 협업하기

🧑🏻‍💻 서버와 클라이언트의 관계

• Client(요청자 - 프론트엔드) & Server(응답자 - 백엔드)
  ⇨ 서버에서 정한 체계에 맞춰서 요청
  

🍪 쿠키

앱 또는 웹사이트를 방문하는 유저들에 대한 정보를 저장하는 주된 방법

• 최대 4KB의 용량을 가진 매우 작은 양의 데이터 저장
• 보안에 취약
  
• 쿠키에 사용자 정보를 담아서 서버로 보내면, 서버는 쿠키를 읽어서 사용자 파악
• 유저가 검색한 것을 기억하거나 페이지 간 이동 시, 로그인 상태를 유지하는데 사용
• 쇼핑 카트 항목들, 자주 찾는 검색 키워드
• 방문 사이트에 로그인 시, '아이디와 비밀번호를 지장하시겠습니까?', 재방문 시 아이디, 비밀번호가 입력된 상태인 경우

[세션 쿠키]

• 쿠키에 만료일이 포함되어 있지 않은 경우, 메모리에 저장되고, 하드 디스크에 남지 않음
• 브라우저를 닫으면 영구적 손실
  ex) 1회성 로그인

[영구적 쿠키]

• 쿠키에 만료일이 포함되어 있는 경우, 브라우저를 종료해도 하드디스크에 남음
• 만료 시기가 되면 삭제
  ex) 자동로그인

🪢 세션(Session)

일정 시간 동안 같은 사용자의 브라우저로부터 들어 오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술

• 일정시간이란 사용자가 웹 브라우저를 웹 서버에 접속한 시점으로부터 웹 브라우저를
  종료함으로써 연결을 끝내는 시점을 의미
  
• 세션은 서버에서 관리
• 서버에서 클라이언트 구분하기 위해 세션 ID 부여, 브라우저 종료할 때까지 인증상태 유지
• 보안을 좋으나, 서버 과부하가 걸릴 수도 있음
  

🪙 캐시(Cache)

캐싱의 의미는 데이터나 값을 미리 복사해 저장한다는 뜻

• 웹사이트에 처음 접속할 때 보다 다시 접속 했을 때 로딩 시간이 단축되는 이유
• 서버로 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간이 오래 걸리는 경우에 사용

브라우저가 저장하는 자산은?

• 정적인 자산 (웹 페이지에 방문할 때마다 변하지 않는 것들)
  - 이미지(로고, 사진, 백그라운드 등), HTML, CSS, Javascript
  

👤 토큰 기반 인증

인증 받은 사용자들에게 토큰 발급하고 클라이언트에서 토큰을 저장했다가 서버에 요청할 때 토큰을 함께 보내서 토큰을 검증 한 후 요청한 응답

• 사용자의 인증 정보를 서버나 세션에 유지 않아도 됨
• 사용자가 로그인 되어 있는지 안되어 있는지 서버에서는 신경 쓰지 않아도 됨
• 쿠키를 전달하지 않으므로 쿠키 사용에 의한 취약점이 사라지게 된다
  

---

⛓️ 웹 접근성 준수 가이드

장애인 차별 금지법

" 신체장애, 지체, 시각, 청각, 인지 또는 신경학적 장애 등 어떤 장애롤 갖고 있는
사람이라도 차별하지 않고 누구나 콘텐츠를 이용할 수 있도록 기술적으로 제공해야 한다."

• 시각적 장애인이 키보드 만으로 콘텐츠를 확인하고 웹사이트에서 제공하는 기능을 확인 할 수 있어야 함
• 키보드의 Tab키(다음으로 이동)와 Shift + Tab(이전으로 이동)키
  

시/청각장애인 등은 장애인이 도저히 이용하기 어려운 웹 페이지를 만든 기업에 대
해 국가인권위에 진정서를 낼 수 있다. 시정 명령이 내려지고도 개선이 없으면 법원
은 3000만원 이하 벌금이나 3년 이하 징역형을 선고할 수 있다. 민사상 웹 접근성 차
별 행위에 대한 손해배상소송도 할 수도 있다.

🫱🏻 앱 접근 권한 (Accessibility Permission)

스마트폰 앱 서비스 제공자가 앱을 통해 이용자의 스마트폰 내에 저장되어 있는 정보 및 설치된 기능에 접근하여 해당 정보를 읽고 수정하거나 기능을 실행할 수 있는 권한

• [필수 권한]
  앱에서 제공하는 서비스에서 필수적으로 스마트폰 내 특정 데이터 또는 기능을 접근해아하는 경우, 필수 권한으로 분류

• [선택 권한]
  앱 실행에 반드시 필요한 기능은 아나지만 일부 기능 또는 정보 활용에 제악이 생길 수 있는 경우 선택 권한으로 분류

• 앱 접근 권한 개인 정보보호 안내서

---

🧑🏻‍💻 개발자와 협업하기

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

---

디자이너와 협업하기

🎨 색상(Color)

• Primary Color / Service Indentity Color
  ⇨ 메인 컬러(Main Color), 키 컬러(Key Color), 브랜드 컬러(Brand Color)

✅ GUI Design Guideline

Style Guideline 정의해 전체적인 일관성 유지

• 컬러 팔레트(Color Pallet) : 목적에 맞게 색 선택할 수 있게 정의 ⇨ 통일감
  
• Typograpy : 텍스트(폰트, 사이즈, 컬러)에 대한 정의
  
• Layout Guideline, UI Guideline + icon Style 정의
  

기존 ) 포토샵, PPT 이용한 문서 작업에 시간 너무 오래 걸림
⇨ 자동 생성 툴(스케치, 피그마) 이용해 시간 절약 및 디자인 작업에 집중

🎀 디자인 시스템 가이드라인

사용자들이 일관성있게 사용, 브랜드 아이덴티티 도출 목적
ex) Google : Material Guide / iOS : Human Interface Guideline

🤔 프로덕트 내 디자인 시스템 가이드라인 정의

컴포넌트, 스타일 등에 대해 통일감있게 사용하도록 정의한다면?

• 에너지 & 시간 절약 ⇨ 서비스 확장 시 편리

🧁 디자인 시스템

• Style Guide
  컬러 팔레트(Color Pallet), Typograpy, 간격
  ⇨ 전반적인 디자인에서 사용될 요소들에 대한 스타일 정의
• Component Library
  공통적으로 사용하는 요소(리스트, UI 카드) 정의
• Navigation
  페이지 흐름에 대한 구조 통일감, 일관성 있게 정의

🤔 디자인 시스템이 필요한 이유는?

• 기획, 디자인, 개발 생산성을 향상 & 비용 절감
• 일관된 브랜드 정체성과 높은 사용성 유지
• 빠른 업데이트적 효율

디자인 시스템 예시 - Toss

---

🖼️ 이미지 파일 종류와 특성

• Lossless 손실 없는
  image를 압축해도 Quality 손실이 발생하지 않음
• Indexed Color
  Color map으로 제한된 색상(256가지) 팔레트 색상으로만 저장 가능
• Lossy 손실 되는
  image를 입축할 경우, 이미지 Quality 손실이 발생
  반복해서 압축할 경우 점점 이미지 Quality가 나빠짐
• Direct Color
  제작자가 직접 선택하지 않은 수천 가지의 색상을 저장할 수 있는 속성
  
  

---

✅디자인 용어 : Affordance

사용자에게 사용법을 알려주지 않아도 자연스럽게 행동 가능하도록 유도하는 것

---

👩🏻‍🎨 디자이너와 협업하기

• PM/PO는 요구사항을 전달
  추구하는 목적, 필요한 기능, 고려해야하는 제약, 요구사항은 개인적인 견해가 객관적인 설명
  
• 개발과 디자인 사이에서 디자인 결과물이 정해진 리소스와 일정 안에서 가능한지 항상 고려하고 교통 정리
• 시스템 상황 변경에 대한 표현도 디자인
  PM/PO가 정의해서 반드시 디자이너에게 전달
• 선 경청/후 협의
  디자인 결과물이 의도와 다르게 디자인 된 경우,디자이너의 관점/철학을 물어보고 의도를 파악
  PM이 정의한 목적이 잘 전달이 안된 경우이거나 디자이너가 다양한 안으로 확장한 걸 수 있음

---

모바일 플랫폼 가이드 라인

✅ Android와 iOS 가이드라인의 차이

• Default Button
• 내비게이션
• UI Control : call to action 버튼 위치 차이
• Search Control 위치
• Visual design
• Dialog Text Alignment차이
  x버튼은 지양 (가이드라인에서 제공되지 않음)
• motion : page refresh

🤔 왜 OS 표준 가이드 라인을 알고 있어야 될까요?

---

🐣 오늘자 일기

공부를 더하고 싶지만,,, 내일 주인장을 출근을 해야 되기에 이만 안녕,,,,
제발 일찍 공부 시작하기,,,,, 약속해 당장! 내일은 늦게 일정이 있어서 엄청 빨리는 못하겠지만,,, 그래도 좀,, 일찍하기,,, 너 오늘의 나와 약속한거다!!!!