[7주차] 협업하기
개발자와 협업하기
- 개발환경을 더 익히는 것이 언어를 배우는 것 보다 중요하다.
개발환경을 이해하고 있어야 디자이너와 개발자와 소통할 수 있다.
프로그래밍 언어
컴퓨터를 인간에게 친숙하게 만든 것이 프로그래밍 언어
고객들의 행동을 컴퓨터가 이해할 수 있는 0과 1의 조합으로 만들어야 한다.
그 사이 통역자의 역할을 하는 컴파일러
프로그래밍 언어를 만드는 사람은 개발자
조건과 행동을 적어두어 ㅈ시
업무 설명서- 프로그래밍 언어
개발자가 코딩을 통해서 컴퓨터에게 일을 시키는 것,
운영체제
1. 운영체제는 하드웨어를 관리해 준다. 하드웨어 용량이 얼마나 있는지 확인할 수 있고, 보조 기억장치를 관리한다.
2. 프로그램을 설치하고 실행하는 것도 관리한다. 같은 프로그램이어도 설치되는 운영체제가 다르면 운영체제에서 지원하는 ㅇ너어로 개발되어야 한다.
계속 달라고 하는 클라이언트 ' 고객의 바로 앞에서 있다고 프론트 엔드락라고 부른다'
계속 주는 서버 ' 고객의 뒤에서 백엔드'
서버에서 정한 체계에 맞춰서 요청을 한다
'API가 없어요'
서버와 클라이언트간에 정보를 주고받는 체계가 없구나
사용자가 브라우저에 행동을 할 수 있게끔...
세션이 유지되고 있어서 값을 주고 받을 수 있다.
쿠키, 세션, 캐시.
쿠키
앱 또는 웹사이트를 방문한 유저들에 대한 정보를 저장하는 주된 방식이다.
쿠키는 최대 4K의 용량을 가진 매우 작은 양의 데이터를 저장한다
단점: 보안에 취약함
쿠키에 나에 대한 정보를 담아서 서버로 보내면, 서버는 쿠키를 ㅇ릭어서 내가 누군지 파악한다.
- 유저가 검색한 것을 기억하거나 페이지 간 이동했을 때 로그인 상태를 유지하는데 사용도니다.
- 쇼핑 카트 항목을, 자주 찾는 검색 키워드
- 방문 사이트에 로그인 시, '아이디와 비밀번호를 저장하시겠습니까?' 재방문 시 아이디 비밀번호가 입력된 상태인 경우
쿠키의 종류는 2가지
세션쿠키: 쿠키에 만료일이 포함되어 있지 않은 경우, 메모리에 저장되고, 하드디스크에 남지 않는다. 브라우저를 닫으면 영구적으로 손실된다.
ex> 1회성 로그인
영구적쿠키: 쿠키에 만료일이 포함되어 있는 경우, 브라우저를 종료해도 하드 디스크에 남는다. 만료 시기가 되면 삭제 된다.
ex> 자동로그인
세션(Session)
자동로그아웃 팝업- 세션 종료 직전에 나옴.
일정 시간 동안 같은 사용자의 브라우저로부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지시키는 기술이다.
일정시간이란 사용자가 웹 서버에 접속한 시점으로부터 웹 브라우저를 종료함으로써 연결을 끝내는 시점을 의미한다.
세션은 쿠키와 다르게 서버에서 관리한다.
서버에서 클라이언트를 구분하기 위해 세션 id를 부여한다. 브라우저를 종료할 때까지 인증상태를 유지한다.
단점: 서버에 과부하가 걸릴 수 있다.
쿠키는 클라이언트 하드웨어에 저장되어 남겨진 상태.
캐시
캐싱의 의미는 데이터나 값을 미리 복사해 저장한다는 뜻
웹사이트에 처음 접속할 때 보다 다시 접속 했을 때 로딩 시간이 단축되는 이유
서버로 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간이 오래 걸리는 경우에 사용
브라우저가 저장하는 자산은?
- 정적인 자산(웹 페이지에 방문할 때마다 변하지 않는 것들)
이미지: 로고, 사진, 백그라운드 등
HTML
CSS
JavaScript
토큰 기반 인증
인증 받은 사용자들에게 토큰을 발급하고 클라이언트에서 토큰을 저장했다가 서버에 요청할 때 토큰을 함께 보내서 토큰을 검증 한 후 요청한 응답을 한다.
- 사용자의 인증 정보를 서버나 세션에 유지 않아도 된다.
- 사용자가 로그인 되어 있는지 안되어 있는지 서버에서는 신경 쓰지 않아도 된다.
- 쿠키를 전달하지 않으므로 쿠키 사용에 의한 취약점이 사라지게 된다.
웹 접근성과 앱 접근 권한의 차이는?
웹 접근성 준수 가이드
[장애인 차별 금지법]
신체장애, 지ㅣ체, 시각, 청각, 인지 또는 신경학 적 장애 등 어떤 장애를 갖고 있는 사람이라도 차별하지 않고 누구나 콘텐츠를 이용할 수 있도록 기술적으로 제공해야 한다.
웹 접근성 준수 가이드
인식의 용이성
운영의 용이성
이해의 용이성
장애인 차별법!!! - 중요하다
앱 접근 권한 (Accessibility Permission)
스마트폰 앱 서비스 제공자가 앱을 통해 이용자의 스마트폰 내에 저장되어 있는 정보 및 설치된 기능에 접근하여 해당 정보를 읽고 수정하거나 기능을 실행할 수 있는 권한을 말함
- 필수 권한: 앱에서 제공하는 서비스에서 필수적으로 스마트폰 내의 특정 데이터 또는 특정 기능을 접근해야하는 경우, 필수 권한으로 분류
- 선택권한: 앱 실행에 반드시 필요한 기능은 아니지만 일부 기능 또는 정보 활용에 제약이 생길 수 있는 경우, 선택 권한으로 분류
개발자와 협업하기
1. 개발 환경과 개발자의 언어를 이해하자
2. 개발팀과 확장성, 속도, 안정성 등을 함께 논의하자
3. 개발 Trend에 대한 학습도 이어가자
4. 공유하고 소통하자
5. 업무의 완료 시점을 정하자
디자이너와 협업하기
색상
Primary Color / Service Identity Color
메인컬러, 키컬러, 브랜드 컬러
GUI Design Guideline
Color Pallet
스타일을 정리한 문서 : GUI Design Guideline
제플린, 피그마
해상도에 따라도 차이
os 마다 디자인 가이르 라인 차이가 있음
스타일, 컬러, 다자인 요소들
여러 서비스들에서 스타일을 정의, 일관성을 위해.
이전으로 돌아갈 때, 네비게이션, 흐름 구조도 정의
디자인 시스템이 필요한 이유
효율성
일관된 UI
생산성
기획, 디자인, 개발 생산성을 향상시키고 비용 절감
일관된 브랜드 정체성과 높은 사용성 유지
업데이트도 빠르고 효율적
국내 대표적인 디자인 시스템
1. 토스
이미지 파일 종류와 특성
반응형 웹을 위해 백터 이미지를 요청
디자인 용어_ Affordance
어포던스
사용법을 알려주지 않아도 사용자들의 행동을 자연스럽게 유도
조건을 만족한 경우, 버튼 활성화로 사용자 행동 유도
버튼에 컬러를 줘서- 구매를 유도하는 방법
컬러 사용을 통해 - 이것이 활성화하는지 알 수 있듯, 컬러 사용으로 개선할 수 있다.
디자이너와 협업하기
1. PM/PO 는 요구사항을 전달한다.
- 추구하는 목적
- 필요한 기능
- 고려해야하는 제약
- 요구사항은 개인적인 견해가 아니어여 한다.
[의견]
- 젊은 여성 고객이 선호하는 디장니으로 해주세요
- 이 버튼을 누르면 누르면 팝엄이 여기에 떴으면 좋겠습니다.
- 텍스트는 더 크게 색상은 레드 계열로 바꾸면 눈에 더 띌 것 같습니다.
[요구사항]
- 고객이 구매하기 전, 구매 내용을 최소 1회 확인할 수 있어야 합니다.
- 고객이 결제할 때 할부 구매 방법을 인지할 수 있어야 합니다.
- 고객에게 궁금증이 있을 경우, 곧바로 고객센터에 연락할 수 있도록 안내해야 합니다.
- 고객이 가입할 때, 다음과 같은 두 가지 이용 약관은 반드시 노출되어야 합니다.
2. 개발과 디자인 사이에서 디자인 결과물이 정해진 리소스와 일정 안에서 가능한지 항상 고려하고 교통정리를 정리해줘야 한다.
3. 시스템 상황 변경에 대한 표현도 디자인이 되어야 한다. PM/PO가 정의해서 반드시 디자이너에게 전달해야 된다.
(404에러, 와이파이 연결 오류)
4. 선 경청 / 후 협의: 디자인 결과물이 의도와 다르게 디자인 된 경우, 디자이너의 관점/ 철학을 물어보고 의도를 파악하자. PM이 정의한 목적이 잘 전달이 안된 경우이거나 디자이너가 다양한 안으로 확장한 걸 수 있다.
