스파르타클럽 내일배움캠프

내일배움캠프_디지털마케터_3기 (사전캠프 4일차)

phj0719 2025. 12. 11. 14:27

오늘 배운 피그마 강의 요약


디스플레이와 배수 이해하기

(1) 개념

  • 디스플레이(Display) : 디지털 화면들 (웹사이트나 앱, 키오스크, 전광판, TV 등) 
  • 픽셀(Pixel) : 디스플레이를 이루는 정말 작은 칸들 > 픽셀의 크기는 따로 정해져 있지 않음!
  • 해상도(Resolution) : 디스플레이의 선명한 정도 = 디스플레이 안에 들어가 있는 픽셀의 개수 (가로 줄의 픽셀 개수 * 세로줄의 픽셀 개수)

(2) 해상도와 픽셀의 관계

  • 해상도가 같다면, 화면 크기가 클수록 픽셀 한 칸의 크기도 커진다.
  • 화면의 크기가 같다면, 해상도가 높아질 수록 픽셀 한 칸의 크기는 작아진다.
    > 화면 크기는 같은데, 가로와 세로 픽셀 개수가 더 많을 수록 픽셀 한칸의 크기는 더 작아진다.
  • 일반적으로 화면 크기가 클 수록 해상도도 높다.
  • 모든 것에는 항상 예외는 있다.
    > 맥북처럼 화면 크기는 작은데 해상도는 매우 높은 디스플레이들이 있다. (픽셀이 오밀조밀 모여있음)
    > 디스플레이 품질의 차이도 있지만 해상도와 화면 크기의 관계 때문에 일반적인 모니터보다 더 화질이 좋게 느껴짐
  • 면적 당 픽셀 갯수가 많다면, 더 세밀한 묘사가 가능하다.

 

1배수 디자인 

(1) 모바일 앱의 사이즈

  • 같은 앱이라도 어떤 스마트폰이든 항상 화면에 보이는 디자인의 위치나 배치가 동일하다.
  • 디바이스마다 맞는 디자인을 일일이 다 만들지 않기 때문이다.
  • 따라서 기준이 되는 사이즈를 하나 정해서 디자인을 한다.

 

(2) 1배수 디자인의 개념

  • 1배수 디자인 : 우리가 디자인을 할 때는 기준이 되는 사이즈 (1배수 = 1배(100%), 즉 원본 사이즈라는 뜻)

 

(3) 1배수 디자인을 정하는 방법

  • 1배수 디자인 사이즈는 일반적으로 사람들이 가장 많이 쓰는 사이즈로 만든다.
  • 내가 만들 앱을 쓸 사람들이 어떤 기종을 사용하는지가 중요하다! 
    > 안드로이드면 안드로이드 기준 / 아이폰이면 아이폰 기준

(4) 디자인 사이즈와 실제 사이즈의 원리

  • 기기마다 정해진 픽셀 배율이 있다.
  • 이 픽셀 배율이 본인이 만든 1배수 디자인을 몇배 확대할 건지 정해준다.
  • 구현과정
    1. 1배수 사이즈를 디자인하고 개발한다. 
    ex. 375 * 812 사이즈

    2. 기기는 코드를 읽고 디자인으로 바꾼 다음, 자기 배율만큼 확대 또는 축소한다. (이 과정을 렌더링 이라고 함)
    ex. 아이폰 15프로 기기의 경우, 375 * 812의 디자인을 3배 확대해서 1125 * 2436 사이즈로 만들어짐

    3. 기기 실제 해상도에 맞게 미세하게 조정을 마친 후 화면에 띄우게 된다.
    (업스케일, 다운스케일 : 모든 기기들의 가로,세로 비율이 같지 않기 때문에 디자인을 배율만큼 확대, 축소 시 실제 해상도와 조금씩 차이가 생긴다. 이때 실제 해상도에 따라 조금 더 키우거나 조금 더 줄여주는 것)
    ex. 아이폰 15프로 기기의 해상도는 1125 * 2436 보다 조금 더 큰 1179 * 2556 이다. 따라서 업슬케일링해서 조금 더 크게 화면에 출력한다.

 

 

오늘도 이어서 마케팅 용어집 만들기 STEP1 끝냈다...!!!!!!! 어제 오래 걸려서 걱정했는데 오늘은 좀 더 수월하게 한듯...?

근데 남아있는 목차를 보면 한숨이 나오고... 하지만 미래의 내가 하겠지....일단 오늘의 할 일은 끝냈다는 것!!!

대여받은 맥북으로 어제 오늘 쓰고 있는데 넘나 좋구여ㅎ 끊김 없는게 최고다! 나도 갖고 싶다 맥북ㅎㅎ

4일차 완료!