[내일배움캠프 사전캠프 5일차] 피그마 기초 5주차 수강

아악 드디어 마지막 강의다아아

아직 무시무시한 퀘스트들이 남았지만,,

괜히 완강한 나 자신이 뿌우듯😎

하지만 수박 겉 핥기식으로 한 것 같아서

복습 필수라는 것,,

복.습.하.자.

 

 

<체계적으로 배우는 피그마 기초 완전 정복 5주차>

-수업목표

1. 화면 단위의 디자인을 수행하며 필요한 UI를 설계할 수 있다

2. 프로토타입의 개념을 이해하고 피그마에서 프로토타이핑을 사용할 수 있다

 

 

-홈 화면 만들기

1배수 화면 : 피그마 디자인을 위한 기준 사이즈 (375*812 or 360*800)

1️⃣ 프레임 생성하기

(1) 화면 디자인을 모아두기 위한 페이지를 추가한다.

(2) 새 페이지에서 프레임 도구를 선택하고, 오른쪽 패널에서 프리셋을 선택한다.

      아이폰 기준일 경우 iPhone 13 mini를, 안드로이드 기준일 경우 Android Large를 선택

(3) 프리셋 중 하나를 누르면 캔버스에 프레임이 추가된다.

프레임의 이름을 홈 화면으로 바꾼다.

2️⃣ 히어로 섹션 추가하기

히어로 섹션은 메인 화면에 가장 상단 영역을 뜻한다.

 

(1) 프레임을 하나 만들고, 높이를 적당하게 조절한다.

(2) 프레임 이름을 Hero Section으로 변경한다.

(3) 만든 프레임을 홈화면 프레임 안으로 넣어준다.

(4) 좌우 너비를 화면에 맞게 조정하고, Constraint를 Left and Right로 적용한다.

(5) 프레임 배경색을 적용한다.

 

 

-앱 바 컴포넌트

컴포넌트 종류 중 네비게이션에 해당하는 컴포넌트이다.

앱 화면 상단에 고정되어 현재 화면의 이름을 알려주면서, 전 화면으로 돌아갈 수 있도록 해준다.

현재 화면에서 할 수 있는 보조 기능을 제공하는 경우도 있다.

머티리얼 디자인에선 앱 바(App Bar), iOS에선 네비게이션 바(Navigation Bar)라고 부른다.

1️⃣ 앱 바 컴포넌트 만들기

(1) 컴포넌트 페이지에 텍스트 레이어를 하나 만들고, 타이틀이라고 적어준다.

(2) 오토레이아웃을 적용하고, 스타일을 적용한다.

(3) 앱 바 프레임의 길이를 조정한다.

      안드로이드 디자인을 만들면 길이를 360, 아이폰이면 375로 변경

(4) 타이틀의 리사이징 값을 Fill container로 적용한다.

(5) 타이틀의 텍스트 정렬을 가운데로 변경한다.

(6) 컴포넌트로 만들고, 프로퍼티를 적용한다.

 

 

-목록 화면 만들기

(1) 프레임 만들기

    홈 화면 옆에 같은 사이즈의 프레임을 새로 만들어 준다.

    프레임 이름을 목록 화면으로 변경한다.

(2) 앱 바 컴포넌트 삽입하기

      앱 바 컴포넌트를 삽입하고, 상단 모서리에 맞춰 준다.

 

 

-리스트 컴포넌트

컴포넌트의 종류 중 컨테이너에 해당하는 컴포넌트이다.

동일한 형태의 정보 덩어리를 반복적인 패턴으로 보여줄 때 사용한다.

앱 바 컴포넌트를 참고해서 만든 후 홈 화면과 목록 화면에 추가한다.

 

 

 

-상세화면 만들기

1️⃣ 프레임 생성하기

     목록 화면 옆에 같은 사이즈의 프레임을 새로 만들어 준다.

     프레임 이름을 상세 화면으로 변경해준다.

 

2️⃣ 앱 바 컴포넌트 삽입하기

      앱 바 컴포넌트를 삽입하고, 상단 모서리에 맞춰준다.

3️⃣ 상세 화면 스케치하기

💡 상세 화면은 일반적으로 큰 상품 이미지와 설명, 그리고 구매 등의 버튼으로 이루어져 있다.

(1) 이미지 영역 넣기

      가로 및 세로가 동일한 정사각형 프레임을 하나 만들고, 연한 회색 배경색을 넣어준다.

      앱 바 바로 밑에 붙여서 넣어 준다.

      이름을 Thumbnail로 적용한다.

(2) 상품 이름 및 정보 텍스트 넣기

      텍스트 레이어를 2개 생성해준다.

      하나는 상품 이름, 하나는 상품 상세 설명입니다라고 적어준다.

      상품 이름은 Title/18px, 상품 상세 설명은 Body/14px로 적용해준다.

      좌측으로 정렬을 맞춰준다.

(3) 버튼 컴포넌트 배치하기

 

 

-로그인 화면 만들기

(1) 프레임 생성하기

     상세 화면 옆에 같은 사이즈의 프레임을 새로 만들어 준다.

     프레임 이름을 로그인 화면으로 변경해준다.

(2) 앱 바 컴포넌트 삽입하기

(3) 텍스트필드 배치하기

(4) 체크박스 배치하기

(5) 버튼 배치하기

 

 

-프로토타입과 프로토타이핑

1️⃣ 프로토타입(Proto-type)이란?

프로토타입(Proto-type)의 원래 뜻은 시제품이다.

디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것을 뜻한다.

구현하는 정도에 따라 낮은 단계와 높은 단계로 나눌 수 있다.

프로토타입을 만들거나 이를 사용해 테스트하는 것을 프로토타이핑(Prototyp-ing)이라 한다.

 

2️⃣ 프로토타입은 왜 만드는 걸까?

실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있다.

팀 구성원들과 시각적인 결과물로 소통할 수 있다.

부족하거나 놓친 부분을 확인할 수 있다.

 

3️⃣ 피그마의 프로토타입의 장단점

장점 : 직관적이다, 빠르게 만들 수 있다.

단점 : 실제 제품처럼 동작하는 걸 만들기 어렵다, 효율성을 떨어뜨린다.

 

4️⃣ 피그마 프로토타입의 구성

 

 

-스크롤 컨테이너와 오버플로우

1️⃣ 오버플로우

프레임 밖으로 컨텐츠가 넘어가는 것을 오버플로우(Overflow)라고 부른다.

프레임에 오버플로우가 발생하면, 프레임 밖으로 넘어간 콘텐츠를 스크롤로 보여줄 수 있다.

즉, 스크롤이 되게 하려면 프레임보다 콘텐츠가 더 길어서 넘쳐야 한다.

다시 말하면, 오버플로우가 되지 않으면 스크롤이 생기지 않는다.

2️⃣ 스크롤 컨테이너

오버플로우가 생긴 프레임을 스크롤로 만들어주는 기본적인 프로토타입 기능이다.

스크롤을 만드려면 실제 스크롤되어야 하는 콘텐츠와 스크롤 속성을 적용할 컨테이너가 필요하다.

1. No scrolling : 스크롤하지 않는다. 기본값이다.
2. Horizontal : 내부의 콘텐츠들이 가로로 넘칠 때, 가로 방향으로 스크롤할 수 있다.
3. Vertical : 내부의 콘텐츠들이 세로로 넘칠 때, 세로 방향으로 스크롤할 수 있다.
4. Both directions : 가로 및 세로 방향으로 모두 스크롤할 수 있다.

 

 

-화면 디자인 연결하기

1️⃣ 플로우의 구성요소

프로토타입의 흐름 하나하나는 플로우라고 부른다.

플로우는 트리거와 애니메이션, 액션으로 구성된다.

💡 프로토타입을 설계할 땐 ‘~하면, ~하게 ~한다’ 라는 문장으로 기억하면 조금 더 쉽다.

예시 ➡️ 버튼을 누르면(트리거), 색상이 천천히(애니메이션) 바뀐다(액션)

 

2️⃣ 트리거의 종류

On click : 클릭 또는 탭/터치했을 때 액션을 실행한다.

On drag : 드래그했을 때 액션을 실행한다.

While hovering : 커서/마우스가 영역 위에 올라가 있는 동안 계속 액션을 실행한다.

While pressing : 커서/마우스로 영역을 누르고 있는 동안 계속 액션을 실행한다.

Key/Gamepad : 특정 키를 눌렀을 때 액션을 실행한다.

Mouse enter : 커서/마우스가 영역 위에 올라가면 액션을 실행한다.

Mouse leave : 커서/마우스가 영역을 벗어나면 액션을 실행한다.

Mouse down : 커서/마우스가 영역을 누르면 액션을 실행한다.

Mouse up : 커서/마우스가 영역을 눌렀다 떼면 액션을 실행한다.

fter delay : 일정 시간이 지난 후에 액션을 실행한다.

 

4️⃣ 액션의 종류

Navigate to : 페이지(프레임)를 이동하는 액션이다.

Change to : 컴포넌트의 다른 배리언츠로 변경하는 액션이다.

Back : 직전 화면으로 이동하는 액션이다.

Set variable : 변수를 특정 값으로 설정하는 액션이다.

Set variable mode : 변수를 특정 모드로 설정하는 액션이다.

Conditional : 분기점을 만들어서 조건에 따라 A 또는 B를 실행하는 액션이다.

Scroll to : 현재 프레임의 특정 지점까지 스크롤해서 이동하는 액션이다.

Open link : 특정 URL을 여는 액션이다.

Open overlay : 현재 프로토타입 화면에 다른 프레임을 위에 겹쳐서 보여주는 액션이다.

Swap overlay : 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션이다.

Close overlay : 라이트박스을 닫는 액션이다.

 

 

 

-애니메이션

1️⃣ 피그마 애니메이션의 종류

Instant : 별도의 애니메이션 없이 즉각 실행한다.

Dissolve : 천천히 흐릿해지면서 화면을 전환한다.

Smart animate : 이름이 같은 프레임들이 자연스럽게 움직이도록 만든다.

Move in/out : 현재 화면 위에 다음 화면을 덮거나 현재 화면이 벗겨지듯 전환한다.

Push : 현재 화면을 지정한 방향으로 밀면서 등장한다.

Slide in/out : 현재 화면을 지정한 방향으로 밀어 사라지게 하면서 등장한다.

 

2️⃣ 스마트 애니메이트

스마트 애니메이트가 제대로 작동하려면 반드시 작동하는 요소의 이름이 같아야 한다.

프레임의 레이어 구조가 통일되어 있지 않거나, 구조가 다르면 정상적으로 작동하지 않는다.

크기, 위치, 투명도, 회전, 배경색을 조작할 수 있다.

 

 

 

-디자인 핸드오프

핸드오프는 ‘손을 떠나다' 라는 뜻으로, 개발자에게 전달하기 위해 디자인 사양을 정리한 문서다.

핸드오프를 자세하게 작성해야 내가 의도한 디자인대로 실제 개발이 가능하다. 

 

1️⃣ 핸드오프 작성 시 지켜야 할 원칙

통일된 구성, 최대한 자세하게, 쉬운 언어로

 

2️⃣ 핸드오프의 구성

1. 디자인의 전체적인 구조

2. 각 프레임의 크기 및 길이

3. 각 프레임의 여백 및 간격

4. 사용된 폰트 및 컬러 스타일 등

 

 

 

피그마 5주차 숙제하기

오오 여태 숙제들 중 가장 재밌고 흥미로웠다..!

프로토타입 뭔데 신기한거지..?

앱이 이렇게 만들어지는구나~~싶었다

이론 정리하는데 생각보다 오래 걸렸지만

내용이 재밌어서 버틸 수 있었던 것 같다!

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.