[독서 기록📚] 오늘도 개발자가 안 된다고 말했다 (3): 디자이너의 일

 

[독서 기록📚] 오늘도 개발자가 안 된다고 말했다 (2) 기획자의 일

---

1. 디자이너의 마인드셋

웹/앱 디자인과 UI/UX 디자인

- 이유가 있는 디자인: 사용자 데이터에 근거한 디자인 (GA, A/B test) 

 

경쟁력을 갖춘 디자이너 

1. 디자인 감각 늘리기와 트렌드 따라가기 : Muzli 확장 프로그램 추가 추천 

2. 개발을 이해하는 디자이너 되기: HTML, CSS 등... 

---

2. 정확한 시각화를 위한 개발 지식 

웹 디자인의 색상 

✔️ 색 공간 이해하기 

1. CMYK

2. HSL: 색상, 채도, 명도를 사용

3. RGB: 빛의 3원색의 약자 

 

✔️ 색상이 다르게 보이는 이유 

: 표준적으로 사용되는 컬러 프로파일

1. sRGB

2. P3

3. Adobe RGB

 

✔️ 웹 컬러 표기법 

1. HEX(16진수) 표기법 : #FFFFFF

2. RGB 표기법 : rgb(255,87,51)

3. HSL 표기법  

4. RGBA / HSLA 

 

이미지/영상

트래픽과 데이터 소모에 대한 문제점을 개발자와 함께 생각하자 

 

✔️ 이미지 크기

고화질의 원본 이미지를 그대로 사용하면 트래픽 문제가 발생할 수 있다, 그러므로 디자인에 맞는 크기로 면적을 조정하거나 해상도에 따라 불러올 수 있도록 이미지를 2가지 정도 제공해주는 것이 좋다 

 

✔️ 상황에 맞는 이미지 포맷 

- 비트맵 이미지: 확대하면 깨져보인다 / 벡터 이미지: 확대해도 깨지지 않는다 

2-1. JPG: 비트맵 

2-2. GIF: 움직이는 사진 / 비트맵 

2-3. PNG: 이미지 품질 손실이 없지만, JPG보다 용량이 크다 / 비트맵

2-4. SVG: 벡터 / 단순한 아이콘, 로고, 로딩 애니메이션 

 

✔️ 손실 압축과 무손실 압축 이해하기 

1) 손실 압축 : 압축률이 엄청 낮지 않은 이상 품질의 차이는 미세하므로 트래픽 감소하는데 사용하기 적절하다 (JPG)

2) 무손실 압축: 품질 손실 없이 이미지를 압축하는 방식, 파일 크기가 크게 줄여지지 않는다 (GIF, PNG)

 

✔️ 웹에 적절한 영상 전달하기

1) 유튜브에 업로드한 후 웹사이트에 적용하여 트래픽 줄이기 

2) 브라우저별 지원 코덱 사용하기 

3) 모바일 웹에서 영상 적용은 피하기 

 

폰트

✔️ 개발자에게 폰트를 어떻게 전달할까? 

1) 시스템 폰트 사용하기 

2) 이미지 폰트 사용하기 : 이미지로 저장하면 트래픽 문제 발생 가능 

3) 웹 폰트 사용하기 : 트래픽 문제 발생 가능 

 

✔️ 폰트의 용량을 줄이는 방법

1) 경량화된 '서브셋' 웹 폰트 파일 사용하기 

2) 최적의 폰트 포맷 사용하기 

3) 구글 웹 폰트 사용하기 

 

✔️ 폰트 아이콘 활용하기 

✔️ 자간과 행간 체크하기 

해상도

✔️ 웹 디자인 디스플레이 기준 : 국가별 해상도 점유율 체크

✔️ 컨테이너 값 정하기 

프로토타이핑

✔️ 프로토타이핑 2가지 방식 

- 하이 피델리티 프로토타입 : 신규 사용자 대상 검증 

- 로우 피델리티 프로토타입 : 메이커들 간의 커뮤니케이션 방식

 

✔️ 프로토타이핑 어떻게 해야 할까?

- 페이퍼 프로토타이핑: 종이와 펜으로 드로잉

- 프로토타이핑 툴 사용하기 : 모바일 제스처나 플로우 표현 

 

 

---

3. 협업을 위한 개발 지식 

웹 표준과 웹 접근성 

-웹 표준: 다양한 운영체제, 브라우저를 사용하더라도 같은 경험을 하도록 만든 규칙 

-웹 접근성: 비장애인, 장애인, 고령자 고려 

 

크로스 브라우징  : 다양한 브라우저에서도 모두 동일한 내용을 보여주는 개발 기술 

1. 익스플로러 개발자 도구(F12)로 하위 브라우저 화면 확인하기 

2. 크롬 개발자 도구로 다양한 단말기 크기 화면 확인하기 

 

크롬의 개발자 도구 

1. 크롬의 개발자 도구 탭 살펴보기 

2. 디자이너를 위한 Elements 패널 활용하기 

 

레이아웃

1. 웹의 레이아웃 구조 : 헤더, 네비게이션, 콘텐츠, 푸터

2. 시맨틱 태그의 종류 

모바일 웹: 모바일 화면에서 보이는 웹 

1-1. 적응형 웹 : 사용중인 기기에 맞는 최적화된 웹 화면 노출 / 기기에 따라 별도로 디자인, 개발 필요

1-2 반응형 웹: 사용자의 디바이스 크기에 맞게 UI가 변경 / 별도 개발은 필요없지만, 모든 리소스를 담고 있어 사용 속도 느림

2. 모바일 퍼스트 : 모바일 먼저 기획-디자인-개발한 이후 데스크톱을 구축하는 것

 

그리드 

1. 그리드 요소 : 마진, 칼럼, 거터

2. 그리드 분할하기: 서비스 기획에 맞게 그리드 칼럼을 분할하여 사용하는 것이 좋다 

 

앱 디자인 고려하기 

1. 모바일 해상도: 주 사용자가 국내 유저인지, 해외 유저인지, iOS 유저인지, 안드로이드 사용자인지 고려하여 기준 설정 

2. 안드로이드의 DP / iOS의 PT 단위

- 해상도가 좋아지면서 DP로 계산해서 디자인 작업해서 다양한 디바이스에 대응 가능 

 

안드로이드 DP, SP, PX, DPI

 

 

3. 안드로이드와 iOS의 디자인 가이드: 각 플랫폼별 가이드를 활용하여 디자인 요소 설계 

 

놓치기 쉬운 항목 체크하기 

1. 빈 페이지, 에러 페이지 디자인하기 

2. 오픈 그래프 : 이미지, 타이틀, 내용 등을 준비하고 개발자에게 전달하는 것이 좋다 

- url 공유시 나타나는 이미지 

오픈 그래프(open graph)와 파비콘(favicon)

 

3. 파비콘 : 웹 전용 (웹사이트에서 상단 탭과 즐겨찾기 했을 때 보이는 작은 아이콘) 

4. 파일명 네이밍 규칙 : 개발자와 함께 정의하는 것이 좋음