[코드스테이츠 PMB 9기] 반응형 웹과 운영체제

디자인 툴 종류 및 활용

1. Sketch

• 유명 기업에서 사용중인, 현재까지 유효한 서비스 신뢰성
• 수 많은 자료와 플러그인의 제공
• 유료 결제로 사용 가능함
• 로컬 프로그램
• Mac에서만 사용 가능한 프로그램
• Zeplin 사용이 필수적임

 

2. Adobe XD

• Sketch와 Figma의 장점을 적절히 섞은 프로그램
• 프로토타이핑 가능
• 다른 어도비 프로그램과의 유연한 연계
• 무료 프로그램

 

3. Figma

• 실시간 협업의 가능성과 원활한 공유 작업 환경
• 버전 관리의 유용성
• 자동 저장 기능으로 파일 소실의 우려가 없음
• 프로토타이핑 가능
• 수 많은 플러그인의 제공
• 프로그램 자체에 내장된 코멘트 시스템
• 브라우저 기반의 프로그램으로 설치의 필요가 없음(Web App 설치 가능)
• 무료 프로그램
• 개선되어야 할 버그
• 기존 프로그램들과 다른 단축키

 

4. Zeplin

• 디자인된 문서를 협업 팀과 공유 가능
• 프로젝트의 분류와 유용한 태그 기능
• 타 툴들이 Zeplin의 기능을 직접 제공하는 추세

 

5. ProtoPie

• 프로토타이핑 툴
• 실제 서비스될 서비스와 거의 동일한 경험을 확인 가능함
• After Effects의 최적화

---

 

반응형 웹

• 웹의 해상도, 레이아웃 등이 스크린 환경에 따라 반응하여 변환되는 웹 페이지
• 디스플레이의 종류와 화면 크기에 따라 실시간 반응하여 웹 페이지를 최적화된 화면 구성으로 보여주는 웹
• 해상도의 크기에 따라 웹페이지를 새로 만들거나, 폰트의 크기가 다르게 제작되지도 않아도 됨

 

디자인 단위

1) PX(Picture element)

• 화면의 이미지를 구성하는 최소 단위( = 화소)
• 사각형으로 이루어져 있으며, 픽셀의 수가 많아질수록 고해상도의 이미지

2)REM

• 사용자가 설정한 브라우저 설정에 따라 폰트의 크기가 달라짐
• 브라우저의 글씨 크기에 비례해서 변화함
• 확대/축소가 익숙해진 최근엔 픽셀의 화면 구성으로는 한계가 있어 Rem을 써야 크기가 일정해짐
• 디자인 툴 Figma는 PX을 단위로 사용하는데, 개발자와의 소통을 위해선 단위 변경이 필수적임
  • 디자인은 px로 설계하고, 개발은 rem으로 진행

 

PX과 REM의 변환 방법

1. 개발자를 위해 px를 rem으로 변환
2. 16px= 1rem
3. 디자인 혹은 폰트 옆에 해당 가이드 명시

 

운영체제에 따라 상이한 기준 단위

• Px(Pixel)은 스크린의 실제 최소 단위
• Px단위는 화면의 전체 화면 크기와 상관없이 지정한 수치만큼 표시되는 절대적 표시 단위
• Dpi(Dpts per Inch)는 1인치(2.54cm) 안에 들어가는 픽셀의 수
• Dpi가 클수록 픽셀 수가 많아지고, 화면이 선명해짐

> Pt(Point)는 iOs에서 사용하는 단위
> Dp(Density-independent Pixel)는 픽셀의 안드로이드 독립 단위
> Pt와 Dp는 디스플레이의 해상도(밀도)와 상관없이 다를 수 있으며, 기마다 차이를 고민하지 않고도 인터페이스를 디자인할 수 있어 각 운영체제에서 지원하는 단위임

c.f. 단위 확인 : Pixplicity DP/PX converter

---

User journey map & User Story

 

Wireframe(Mid-Fi)