[내일배움캠프 사전캠프] DAY.3 (1강) UXUI 기초 개념 이해 / 수강 완료

TIL. 2025/10/15

 

1. 오늘 학습 키워드

 : UXUI 기초 개념 이해

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

 : UXUI에서 사용되는 언어와 기본적인 개념을 배우고, 피그마에서 자주 사용되는 기본적인 툴을 토대로 배웠다.

 

오늘은 어제에 이어 1강 UXUI 기초 개념 이해 중 1-3강. 디스플레이와 배수 이해하기 부터 1-10.1주차 과제 제출까지 강의를 수강하였다.

 

각 강의 당 내용 요약 정리

 

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

: 디스플레이와 픽셀/픽셀과 해상도의 관계

디스플레이란? 우리가 보는 모든 디지털 화면을 칭함. 픽셀이라는 정말 작은 칸들로 이루어져있음

디스플레이와 배수 : 디지털 화면에 대한 원리 (ex.컴퓨터모니터,앱)->디자인을 어떻게 보여주고 있는지 이해를 해야
디자인을 할때 내가 원하는 화면에 정확하게 디자인 할수있음
디스플레이와 픽셀 : 디지털화면=디스플레이->픽셀이라는 정말 작은 칸들로 이루어져있음=모자이크 원리
해상도 : 디스플레이의 선명한 정도를 나타냄=디스플레이 안의 픽셀의 개수
픽셀의 갯수 : 가로줄의 픽셀 개수*세로줄의 픽셀 개수

해상도와 픽셀의 관계
-해상도가 같다면 화면 크기가 클수록 픽셀의 한칸의 크기가 커진다
-화면의 크기가 같다면, 해상도가 높아질수록 픽셀의 한칸의 크기가 작아진다/면적당 픽셀수가 많아지게됨
-일반적으로 화면 크기가 클수록 해상도도 높음=일반적으로 큰 모니터는 더 선명함
-면적당 픽셀 갯수가 더 많다면 더 세밀한 묘사가 가능함

1배수 디자인
-모바일 앱의 사이즈 : 같은 앱이라면 어떤 스마트폰으로 열어도 항상 화면에 보이는 디자인의 위치나 배치가 동일해야함.
디바이스마다 맞는 디자인을 일일이 다 만들지 않음, 그렇기 때문에 기준이 되는 사이즈를 하나 정해 디자인을 함
-기준이 되는 사이즈란? 1배수 디자인=1배(100%) 즉, 원본사이즈 // 기본적으로 디자인은 1배수로 진행함
-1배수 디자인을 정하는 방법
 사람들이 가장 많이 쓰는 사이즈로 하는것이 일반적=내가 만들 앱을 쓸 사람들임을 유의 해야함
권장하는 1배수 사이즈 : 현재 아이폰 375*812/안드로이드 360*800 권장 예전보다 조금 더 커짐 
디바이스 별 픽셀 배율 및 해상도를 확인하는 사이트 첨부*** : https://yesviz.com/viewport/

1배수 디자인이 실제 스마트폰에서 구현되는 과정 -기기 해상도는 4자리 우리가 디자인하려는 사이즈는 3자이에 불과함
-위에서 기기마다 정해진 픽셀 배율이 있다
이 픽셀배율이 우리가 만든 1배수 디자인을 몇배 확대할건지 정해주게됨.
1. 1배수 사이즈로 디자인하고 개발
2. 기기는 코드를 읽고 디자인으로 바꾼다음 자기 배율만큼 확대 또는 축소->이 과정을 렌더링이라고 함
3. 기기 실제 해상도에 맞게 미세하게 조정을마친 후 화면에 띄우게 됨(정확하게 맞지않아도 미세조정을 통해 맞춤)
모든기기의 가로세로비율이 항상 같지 않기 때문에 미세조정 과정을 거침->업스케일 다운스케일 과정
(ex. 375*812→(렌더링)1125*2436(@3X)→(미세조정-업스케일링 또는 다운스케일링)1179*2556 아이폰 15프로기기 기준

 

1-4강. 이미지 표현 방식, 벡터와 레스터

이미지가 깨진다는 것이 구체적으로 무엇을 말하는지에 대해서 다뤘음.
 *컴퓨터가 그림을 그리는 방법 -그림을 그린다기 보다는 데이터를 채운다! 에 가까움. 데이터를 채워서 그림을 표현
1. 래스터(raster) : 비트맵(bitmap) 형식이라고도 부르며, 픽셀 칸에 색깔 칩을 하나씩 담는 형식/ 포토샵이 래스터형식을 대표적인 툴/
파일형식으로는 jpg,bmp,gif,png 파일형식을 '확장자'라고 함
2.벡터(vector) ; 그림을 수식으로 표현하는 방식, 일러스트레이터나 피그마가 대표적인 툴 / 수식으로 표현하는 형식이라 이미지라기보다는 코드파일에 더 가까움, / 대표적으로는 svg가 있음.

 

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

예를들어, 같은 버튼 3개를 만든다고 할때, 일정한 규칙이 있어야 다른 디자이너와 함께 일할때도, 개발자가 디자인을 보고 개발할때도 서로 소통하는 시간을 줄일수 있음.

그렇기때문에 8포인트 그리드, 즉, UI를 8배수에 맞춰 배치하는 레이아웃 규칙을 칭함.

(왜 꼭 8의 배수여야 하나? 8이라는 숫자는 1,2,4,8로 나눌수 있음. 즉 2로 3번 쪼갤 수 있고, 나눈 숫자도 다시 짝수이기 때문)

 

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

- 피그마를 사용함에 있어, 기본적인 메인 화면 구성에 대해 배움, 또한 앞으로 자주 사용하게 될 피그마 커뮤니티까지 방문함.

- 디자인 파일 생성 후, 피그마 도구 메뉴(툴바)에 무엇이 있는지, 어떠할때 사용하는지에 관하여 배웠음

 

1-7강. 이동 툴과 크기 조정 툴

이동툴과 스케일 툴에 관하여 배웠다. 화면을 이동할때는 스페이스바를 사용하여, 이동툴을 사용하면 더 쉽게 이동할 수 있다는 것을 배웠음

스케일 툴은 크기를 강제로 변경하기 대문에 UI내부 요소들을 일일히 수정해야되는 불편함이 생기기 때문에 주의해야한다고 배웠음.

 

1-8강. 도형과 글자 만들기

: - 피그마에서 도형 만들기 / 렉탱글, 다각형, 원형, 선, 글자 등 활용할 수 있는 툴을 이용하여
- 레이어 개념 : 레이어의 순서에 따라 어떻게 배치되고, 어떻게 도형이 활용되는지에 관하여 배울수 있었음

 

 

1-9강. 패스 알아보기

: - 패스 란? 펜툴, 백터형식의 모양들 /선, 모양, 복잡한 형태의 객체 모두
(스케일 툴을 사용하는 것은 지양함. 아웃라인이 소수점으로 나오는 경우가 생기기 때문)
- 아웃라인 스트로크 : 버튼을 만약 크기를 다르게 하고싶은데 비율을 유지하고 싶을때 사용함, 하나의 도형으로 변경하는 것임
- flatten(평탄화) : 회전, 모서리 곡률 정보가 사라지고, 정렬기준이 다시 잡힘,그래야 정렬기준이 잘 잡힘 새로운 형태로 재 가공해주는 툴
글자도 아웃라인하면, 글자가 아닌 도형으로 재 가공되어 더이상 수정이 불가하기 때문에 신중하게 작업해야함.

 

이와 같이 펜툴과 도형툴, 글자 툴을 사용해보고, 평탄화하는 과정을 진행함.

 

 

1-10강. 1주차 과제 제출.

▲1강 모두 수강완료

▲1주차 과제 제출 (주어진 이미지와 동일하게 도형 만들기)

 

최종적으로 1강의 마지막 단계인 1주차 과제까지 제출하여 마무리 하였다.

 

 

3. 학습하며  겪은 문제/해결방법

- 문제1.

: 피그마 파일 불러오기 - 방법을 몰라 한참동안 헤매었다.

    > 해결방법 : 1) 주어진 피그마 파일을 인터넷 주소창에 검색하면 다운로드 받아진다.

                        2) 다운로드 받은 파일을 피그마 창에 그대로 드래그한다

                        3) 새로운 창이 뜨고, 다운받아지는 듯한 창이 진행된다.

                        4) 기다리면 창 오른쪽 아래에 'DONE'이라는 버튼이 보이게 된다.

                        5) 버튼을 누르면 다운로드 받은 파일의 창이 뜸.

 

- 문제2.

: 피그마 파일 작업을 모두 완료한 후 저장하기 - 저장하기 버튼이 따로 보이지않아 검색하여 찾아내었다.

  >해결방법 :

 

 

 

 

 

◀

1) 위에 파란색으로 표시한 버튼을 누른다. (파일 이름 바꾸기는 아래 글자를 더블클릭하면, 쉽게 변경된다.)

 

 

 

 

 

 

 

 

 

 

 

◀

2) 버튼을 누르면 해당 창이 뜨는데, 표시 해놓은 ( File - Save local capy) 순서대로

    진행하면, fig 파일이 생성되어 저장 된다.

 

 

 

 

 

4. 내일 학습 할 것은 무엇인지

 : 내일은 2강에서 다루는 피그마 핵심 개념에 대해 학습하고, 실습까지 진행해 볼 예정이다.