1배수 디자인과 8포인트 그리드, 피그마 도형 기능 알아보기와 JD 분석

[사전캠프_9/2]

• 피그마 기초 1주차 강의 이수
• 웹/앱 서비스 조사 및 나의 관심 분야 찾아보기
• 내가 생각하는 UXUI 디자이너의 핵심 역량

​

​

피그마 기초 1주차 강의 학습내용

​

1. UXUI 기초 개념 이해

​

피그마 인터페이스 / 레이어 / 도형 에 대해 알아보자

​

피그마는 어떤 툴?

디자인툴이자 협업도구

디자이너 툴이자 다양한 직군들과 같이 사용하는 도구이다.

​

1-3. 디스플레이와 배수 이해하기

​

• 디스플레이(Display)와 픽셀(Pixel)
  • 디지털 화면
  • 디스플레이는 픽셀이라는 작은 칸들로 이루어져있다.
• 해상도(Resolution)
  • 디스플레이의 선명한 정도
  • 디스플레이 안에 들어가 있는 픽셀의 개수
  • 픽셀의 개수 = 가로줄의 픽셀 개수 + 세로 줄의 픽셀 개수 (1920*1080)
• 해상도와 픽셀의 관계
  • 픽셀이 많을수록 해상도가 높아진다. 따라서 일반적으로 큰 화면일수록 픽셀을 많이 넣을 수 있어 화질이 좋다.
  • 면적 당 픽셀 갯수가 더 많을수록 더 화질이 좋다.
  • 8*8해상도는 4*4 해상도보다 명적 당 픽셀 갯수가 4배 많기 떄문에 4배 선명, 세밀한 표현 가능

​

• 1배수 디자인

스마트폰 화면의 사이즈가 모두 다르지만 같은 레이아웃을 가지고 있음.

같은 앱은 다른 스마트폰에서도 화면에 보이는 디자인의 위치나 배치가 동일함.

*하지만 디바이스마다 일일이 다른 디자인을 만들지 않음.

(스마트폰은 수백가지이기 떄문에 모든 사이즈를 고려하여 디자인할 수 없다.)

>> 따라서 기준이 되는 사이즈를 하나 정해서 디자인한다.

​

기준이 되는 사이즈 = 1배수 디자인

1배수 = 1배(100%) = 원본 사이즈

​

1배수 디자인 사이즈는 사람들이 가장 많이 쓰는 사이즈로 하는 것이 일반적.

*유의사항 : 내가 만들 앱의 사용자층을 고려

​

• 권장 1배수 사이즈

아이폰: 375*480

안드로이드: 360*800

배수는 픽셀 배율이라고도 부른다.

>> 디바이스별 픽셀 배율 및 해상도 확인하는 곳

https://yesviz.com/viewport/

Viewport Size for Devices | Screen Sizes, Phone Dimensions and Device Resolution | YesViz.com

 

 

​

• 1배수 다자인이 실제 스마트폰에서 구현되는 과정
  • 1배수 사이즈를 디자인, 개발
    • ex) 375*812 사이즈로 디자인, 개발

• • 기기는 코드를 읽고 디자인으로 바꾼다음, 자기 배율만큼 확대 또는 축소(이과정은 렌더링이라고 함)
    • ex) 아이폰 15의 경우 3배수. 375*812의 디자인을 3배 확대. 1125*2436으로 만듬

• • 기기 실제 해상도에 맞게 미세하고 조정을 마친 후 화면에 띄움
  • 3배 이후에 조금씩 다른 비율을 조정하여 출력
  • 실제 해상도에 맞춰 크기를 좀더 키우는 것을 업스케일, 줄이는 것을 다운스케일이라고 한다.
    • ex) 아이폰 15프로의 실제 해상도는 1125*2436보다 조금 더 큰 1179*2556이기 떄문에 업스케일링하여 화면에 출력.

 

1-4 이미지 표현 방식, 벡터와 래스터

​

• 래스터(Raster) 방식
  • 비트맵(Bitmap) 형식이라고도 부름
  • 픽셀 칸에 색깔 칩 하나씩 담는 형식(포토샵)
  • jpg, bmp, gif, png
• 벡터(Vector)
  • 그림을 수식으로 표현하는 형식(일러스트, 피그마)
  • 수식으로 표현하는 형식, 코드 파일에 더 가깝다.
  • svg

​

• 래스터 방식 특징
  • 픽셀 갯수가 많을 수록 화질이 좋다.
  • 이미지 크기를 키우는건 픽셀의 크기가 커질 뿐, 화질이 좋아지는 건 아니다.
  • 확대와 축소를 반복하면 색상 정보가 사라진다.
  • 단순한 방식으로 고해상도 이미지를 표현하기 좋다.
• 벡터 방식의 특징
  • 확대 및 축소 등 크기 변형이 자유롭다.
  • 이미지가 크고 복잡하면 수식도 복잡해져 파일 크기가 매우 커진다.

>> 이미지에 따라 적합한 확장자를 선택해서 사용하는 것이 필요

​

Q. 피그마는 벡터 형식은데, 그래픽이 깨져요.

우리가 보는 디스플레이 화면은 결국 픽셀 기반. 따라서 자세히 들여다보면 깨진 것처럼 보일 수 있다.

또는 이미 래스터 형식으로 만들어진 이미지를 피그마에서 사용한다고 벡터 개체가 되진 않는다.

 

1-5. 8포인트 그리드는 뭘까?

​

화면 디자인에도 규칙이 있다.

UI들은 '이렇게 하자'라고 합의한 규칙이 있다.

일반적으로, 디자인 요소들은 8의 배수로 만든다는 규칙이 있다.

그 규칙을 8포인트 그리드 디자인이라고 부른다.

​

• 8포인트 그리드 디자인의 개념
  • UI를 8의 배수에 맞춰 배치하는 레이아웃의 규칙
  • UI 사이의 간격, 요소의 여백, 크기 등을 8의 배수 단위로 조정해서 사용

​

• 8포인트 그리드, 왜 쓰는걸까?

UI를 디자인할 때 이러한 일정한 규칙이 있다면 효율적으로 디자인이 가능하다.

규칙이 없다면 새로운 디자인을 만날 때마다 업무의 효율성이 떨어진다.

여백이나 간격, 높이나 너비 등 UI 수치를 키우거나 줄일 땐 최대한 8의 배수 단위로 한다는 약속

​

• 꼭 8의 배수여야 하나요?

8은 1, 2, 4, 8로 나눌 수 있다. 즉, 2로 3번이나 쪼갤 수 있고 나눈 숫자도 다시 짝수

그만큼 디자인을 축소할 때 디자인을 망가뜨리지 않고 축소, 확대 가능

>> 해상도가 변하면서 업스케일, 다운스케일될 때 유연하게 대처할 수 있음.

​

 

10도 짝수긴 하지만, 한번 나누면 바로 홀수가 됨.

홀수는 확대 또는 축소할 때 소수점이 생기는데, 만약 소수점이 생기면 픽셀 한칸을 미처 못 채운 불완전한 디자인이 발생. 결국 디자인이 깨져 보이는 현상(소수점은 컴퓨터가 흐리게 표현)

​

1-6. 피그마 본격적으로 둘러보기

​

• outline stroke 기능
  • 도형의 외곽선을 선 상태로 두지 않고 나누어서 작업하는게 유리함.
  • 실무에서 아이콘을 만들 때 적용

 

 

• Flatten 기능
  • 회전한 정보, 곡률 정보가 사라지게하는 기능
  • 회전한 도형의 정렬 기준이 사각형으로 다시 잡힌다.(원래부터 이 모양의 도형으로 인식되는 것)
  • 회전 도형을 반드시 Flatten 기능을 사용해야 정렬시 용이
  • 다만 작업 정보가 사라지는 것이기 때문에 주의해서 사용

​

​

웹/앱 서비스 조사 및 나의 관심 분야 찾아보기

​

1. 현재 웹/앱에는 어떤 서비스들이 있는가

a. 내가 자주 사용하는 웹/앱 : OTT 앱(왓챠, 넷플릭스, 티빙) & 패션 앱(29cm, EQL)

b. 관심 있는 웹/앱 : 왓챠, 왓챠피디아, CGV, 29cm

c. 내가 가고 싶은 기업에서 운영하고 있는 서비스 종류 : 왓챠 >> 왓챠피디아, 숏챠

​

2. 서비스 별 주요 목적, 기능

a. 왓챠피디아 : 영화, 시리즈, 도서, 웹툰 등 컨텐츠 평가 및 추천 서비스

b. 타겟 : 컨텐츠를 소비하는 20-30대

c. 기능 : 컨텐츠 평가(별점), 평가 기반 컨텐츠 추천, 컨텐츠 정보 제공, 다른 유저들의 평가 등

​

3. 비슷하거나 같은 서비스를 운영하고 있는 웹/앱

키노라이츠, 레터박스 등

​

4. 컨텐츠 관련 서비스 기업 조사

넷플릭스 : 자체 컨텐츠 제공, 컨텐츠에 대한 "좋아요", "맘에 안 들어요" 평가를 바탕으로 작품 추천

티빙 : 예능, 스포츠 중계 라이브 컨텐츠, 세분화된 콘텐츠 카테고리

CGV : 영화 예매, 매점, 굿즈 주문 등 앱 내에서의 구매

키노라이츠 : 모든 OTT 콘텐츠 탐색 및 콘텐츠 추천 서비스, 어느 OTT에 원하는 작품이 있는지 검색, 신작과 종료 예정작 확인, 취향 분석, 시청 기록

​

5. 나의 관심 서비스

컨텐츠를 적극적으로 즐기는 20-30대를 타겟으로 한 서비스인 왓챠피디아, 키노라이츠 등에 가장 관심이 있다.

개인화된 맞춤 추천 또는 빅데이터 기반 정보 제공으로 컨텐츠 소비의 질을 높여주는 서비스에 관심이 있다.

​

​

내가 생각하는 UX/UI 디자이너의 핵심 역량

​

1. 기업 요구사항

​

1) 왓챠 프로덕트 디자이너(Product Designer)

• UX/UI 분야의 실무경험 3년 이상이신 분
• 서비스를 처음부터 설계해보고 완성한 경험이 있으신 분
• 논리적이고 싶이 있는 분석을 토대로 비즈니스 목적에 맞는 UX 설계가 가능하신 분
• 다른 직군에게 자신의 논리와 사용 경험 설계를 설명하고 설득할 수 있는 커뮤니케이션 능력
• 조형적 완성도 높은 GUI 디자인이 가능하신 분
• 리스폰시브 디자인 경험이 있으신 분

​

2) 티빙 프로덕트 디자이너(Product Designer)

• Product Design 관련 경력 5년 이상을 보유하신 분
• 정보, 기술, 정책을 이해하고 이를 바탕으로 구조화된 인터페이스와 일관된 사용 경험을 제시할 수 있는 분
• Figma를 통해 완성도 높은 App/Web UXUI 설계 및 시각화 경험이 있으신 분
• 데이터를 기반으로 고객의 요구사항을 파악하고 개선하여 시장에 출시한 경험이 있으신 분
• OTT 및 IT 플랫폼/미디어에 대한 이해를 보유하신 분
• Prototyping Tool(Figma, Zeplin, Protopie 등)과 협업 툴(Slack, Jira, Wiki)의 이해와 경험이 있으신 분
• 멀티 플랫폼에 대한 지식을 보유하신 분

​

2. 핵심 역량 키워드

#Figma

#UX 설계

#UI 디자인

#Prototyping

#고객 및 비즈니스 데이터

#문제 정의 및 개선

​

3. 내가 생각하는 핵심 역량

• 피그마 스킬
• 기획한 서비스의 UX와 같은 목적과 맥락을 가진 UI 설계
• 협업을 위한 커뮤니케이션 능력
• 논리를 기반으로 한 아이디어
• 데이터를 기반으로 한 리서치와 분석

​

​

​

[회고]

피그마 기초 강의로 피그마의 기본적인 툴들을 꼼꼼하게 다시 확인할 수 있었다.

도형을 사용할 때 실무에서 지켜져야 할 기본적인 규칙들도 알 수 있었다.(개발자와의 원활한 협업을 위해 지켜야하는 사항들)

UX/UI 디자이너로써 나의 관심분야와 기업들의 요구사항들을 리서치하며 이번 캠프의 목표를 선명히 할 수 있었다.

관심분야를 더욱 명확히하고 기업에서 바라는 핵심 역량들을 키워나가고자 한다.