eunzi789 님의 블로그

오늘은 장미순 튜터님께서 특별히 피그마 활용법에 대한 특강을 진행해주셨다!

강의내용은 오토레이아웃, 컨스트레인츠, 컴포넌트를 만드는 이유, 레이아웃 구조를 파악하는 생각의 흐름과 같이 작업의 원리 위주의 설명을 해주셨다. 또 질문에 대한 답변도 주셔서 평소 UI 작업을 진행하면서 궁금했었던 부분들이 해소되었던 특강이었다 그중 기억에 남았던 부분과 몰랐던 부분에 대해 정리를 해보았다.

섹션으로 잘라보고 자른 섹션을 또 작은 단위로 나눠서 볼 것 

웹 페이지를 만든다면 맨 처음 해야할 작업이 될 것이다. 어떤 형태가 반복되어서 보여지는지를 파악하기 위해 큰 단위로 구분해보고 또 구분한 페이지 안에서도 작은 단위를 찾아내보는 것이다.

• 작은 단위의 컴포넌트부터 만드는 것이 좋음. 물론 상황에 따라 다르기도 하지만, 작은 단위의 컴포넌트를 합해서 큰 컴포넌트로 만드는 것을 추천
  tip) 디자인 가이드라인을 참고하여 디자인 계획을 먼저 세운 뒤 시작할 것

이름짓기 팁

• 폰트 같은 경우 사이즈를 이름으로 두면 나중에 수정되었을 때 다 고쳐야해서 난감할 수 있으니, 사이즈를 이름으로 하지는 말 것 ex) Primary 12px (x)  / Headline L, Title M, Body L (o)
  
  
• 생긴대로 이름을 짓는다 (like metaphor..)
  ex) close, delete, 엑스, 등 하나의 컴포넌트안에 이름이 여러개가 생겨서 난감했던 적이 있음
  
  

아이콘을 사용할 때

• 기본 사이즈는 24x24를 추천
• 필요한 요소 빼고는 다 없애주는게 좋음 예를들어 vetor를 감싸는 frame 같은 요소들을 제거하고 아이콘 이미지를 구성하는 것이 사이즈 변경시 매끄럽게 동작될 수 있음

  

• 아이콘에 필요한 요소들로 구성되었다면 position을 반드시 scale로 지정해 주어야함. 그래야 비율을 유지하면서 크기변경이 가능함  * 이미지 참고→
  (tip_ 배포하기 전 한번쯤은 반드시 확인해보는 것이 좋음)
• 선으로 된 아이콘 일 경우엔 반드시 outline strock으로 변경해서 사용해야한다. 선으로 된 아이콘은 확대했을 때 크기는 커지지만 선 굵기는 그대로여서 아이콘이 이상해질 수 있기 때문

 
컴포넌트

• 작업 할 때 반복되는 구조를 복사해서 사용하다 추후에 변경되면 수정이 너무 어려워 생겨나게 된 형태 → 재활용이 가능하며 한번에 수정 가능하여 효율성이 높음
• 작은 단위는 무조건 컴포넌트로 만든다고 생각하면 될 듯(작은단위 제외하고 컴포넌트로 만드는 틀이 정해진 건 없음)
• 회사나 팀마다 기준과 방식이 다를 수 있으므로 충분한 의논을 거쳐서 재사용이 가능한 형태로 만들면 됨

bottom navigation bar

• 하단 네비게이션 바를 구성할 때 모든 컨텐츠의 영역은 동일하게 나눠가져야하며, 이 때 간격을 두면 사용성에 방해가 될 수 있으니 권장하지 않음.
• 또, 네비게이션 바 자체에 패딩을 두는 것 보단 터치 영역을 넓히기 위해, 각 컨텐츠 박스 안에  패딩값을 두는 것이 좋음.

컨스트레인츠와 오토레이아웃

• 여러가지 디바이스에서 유연하게 UI를 제공하려면 Constraints와 Auto Layout의 차이점을 반드시 알아야하며, 어떤 상황에서 어떻게 적용해야하는지를 알아야한다
• 리사이징을 위한 차이점 이해하기
  • 부모가 auto Layout 인 경우 : resizing 설정을 해주어야하며, 자식요소는 꼭 fill로 설정해야함
    (ex_ appbar는 상단에 고정되어야 하므로 부모영역을 선택한 뒤 배치를 상단으로 설정하고 자식요소를 선택한 뒤 fill로 채워주어야함)
  • 부모가 frame 인 경우 : 자식은 constraints를 설정
    (ex_ bottom navigation는 하단에 고정되어야하므로 포지션을 Left+Right / bottom 으로 설정해야함)

Nested instance

• 컴포넌트 안의 컴포넌트로 최상위 컴포넌트에서 하위 컴포넌트의 프로퍼티를 조절 할 수 있음
• 예전에는 컴포넌트를 다 눌러야 상태를 바꿀 수 있었는데 네스티드 컴포넌트를 사용하면 편리함.

UI kit

• 색상 선정시 주요 색상과 보조 색상들은 단계별로 잘 구분하여서 사용했지만, 기본적인 white/black은 style로 등록하지 않고 사용하는 경우가 많이 보였는데, 반드시 style로 등록하여 진행해야한다. 추후에 수정할 때 번거로움을 덜 수 있는 유용한 방법이다
• gray 색상도 단계별로 style을 등록하여 사용하는 것을 추천한다!

Q. 어떨때 프로퍼티를 쓰고 어떨때 베리언츠를 쓰나요?
베리언츠 : 통째로 바꿀때(큰단위)
프로퍼티 : 부분적으로 조건이 붙어야할 때(작은 단위)

Q. 이름 만드는 규칙이 있나요?
팀만의 규칙에 따라 다르므로 이미지를 외울 필요가 없고 팀 안에서 규칙과 레벨을 정한 뒤 진행하면 된다.
레벨을 맨 앞에 두고 컴포넌트 이름을 정한 것은 컴포넌트 페이지를 만들어두고 진행하는데 그 때 찾기 쉬우라고 이렇게 규칙을 만들었다고 함 (*아래는 예시 이미지)  

Q. 슬래시로 계층구분해도 되는지?
/로 할 경우 안보일 수도 있으므로 지양하는 것이 좋음. 대시나 언더바를 사용하기도 하므로 상황과 가이드라인에 따라서 지켜서 만들면됨.

피그마에서 레이어나 프레임 간에 커넥션을 만들게 되면 인터랙션(Interaction)을 설정할 수 있다. 인터랙션은 연결된 대상들이 프로토타입에서 어떤 식으로 전환되거나 상호작용할지를 결정한다. 인터랙션을 설정하면 preview에서 UI를 확인할 때 좀 더 생동감있게 페이지를 전환하거나 간단한 기능을 동작하게 만들 수 있으며 협업시 소통에 도움이 될 수 있다.

인터랙션 설정을 위해서는 아래의 사항들을 알아야한다.

1. 트리거(Trigger)

먼저 트리거를 설정해야 하는데, 프로토타입에서 커넥션이 시작되는 대상(레이어 혹은 프레임)에 어떤 행동을 했을 때 인터랙션을 시작할 것인지를 선택하는 것이다. 참고로 프레임과 프레임 간에 커넥션을 연결했을 때, 트리거는 기본적으로 On Click으로 설정된다.

• None (없음)
• On Click / On Tap (대상을 클릭하거나 손가락으로 탭했을 때)
• On Drag (마우스로 드래그하거나 손가락으로 스와이프했을 때)
• While Hovering (마우스로 대상 위에 호버하는 동안만)
• While Pressing (마우스로 클릭하고 있거나 손가락으로 누르고 있는 동안만)
• Key/Gamepad (키보드나 패드의 특정 키를 누르고 있을 때)
• Mouse Enter (마우스가 대상의 영역으로 진입/호버했을 때)
• Mouse Leave (마우스가 대상의 영역을 벗어났을 때)
• Mouse Down / Touch Press (마우스 누름이나 터치를 감지했을 때)
• Mouse Up / Touch Release (마우스를 누른 상태 or 화면을 터치한 상태에서, 손가락을 뗐을 때)
• After Delay (정해놓은 시간이 지난 후에)

2. 액션(Action)

다음은 액션으로, 트리거를 설정한 조건을 만족했을 때 어떤 일이 일어나야 할 지 설정하는 것이다. 액션은 프레임과 프레임 간에 커넥션 연결 시, 기본적으로 Navigate to로 설정된다. 또, 내가 커넥션을 준 대상이 프레임인지, 영상인지 등에 따라 특정 액션들이 보이거나 보이지 않는다.

• None (없음)
• Navigate to (하나의 화면에서 다른 화면으로 전환하기)
• Change to (특정 요소로 변하기)
• Open Overlay (화면/프레임 위에 특정 요소를 띄우기)
• Swap Overlay (띄운 요소를 다른 요소와 바꾸기)
• Close Overlay (띄운 요소를 닫기)
• Back (이전 화면으로 돌아가기)
• Scroll to (특정 부분으로 스크롤하기)
• Open Link (링크 열기)

(대상이 영상인 경우)

• Play Video (비디오 재생하기)
• Pause Video (비디오 일시정지하기)
• Toggle Play/Pause (트리거 작동 시마다 재생과 일시정지를 번갈아가면서 실행하기)
• Mute Video (영상 음소거하기)
• Unmute Video (영상 음소거 해제하기)
• Toggle Mute/Unmute (트리거 작동 시마다 음소거와 해제 번갈아가면서 실행하기)

3. 데스티네이션 (Destination)

데스티네이션은 설정한 액션의 대상을 말하며 인터랙션을 만들게 되면 연결한 대상이 데스티네이션으로 자동 설정된다. 예를 들어서 Frame 1으로부터 시작해서 Frame 2로 커넥션을 연결했다면, Frame 2가 데스티네이션이 되는 것이다. 데스티네이션은 프로토타입에서의 화면, 즉 프레임이 될 수도 있지만, 팝업 같은 걸 표현하기 위한 용도로 Overlay라는 액션을 주면, 프레임이 아닌 레이어들로도 지정할 수 있다. 

4. 애니메이션(Animation)

추가로 애니메이션을 설정할 수 있는데 Navigate to 액션을 기준으로 했을 때, 한 화면에서 다음 화면으로 넘어갈 때 어떤 식으로 전환될지를 설정한다. 애니메이션은 아래와 같은 종류가 있다. 그 외에도 어떤 방향으로 애니메이션이 작동할지(Direction), 얼마나 부드럽게 애니메이션이 작동할지(Ease)를 설정할 수도 있다.

• Instant (별도 애니메이션 없이 바로 전환)
• Dissolve (한 화면에서 다음 화면으로 부드럽게 블러되면서 전환)
• Smart Animate (이전 화면과 다음 화면에서 변한 요소들이 무엇인지 계산해서 자동으로 애니메이션 생성)
• Move In (다음 화면이 이전 화면 위로 움직이면서 들어옴)
• Move Out (다음 화면이 이전 화면 위로 움직이면서 빠져 나감)
• Push (다음 화면이 이전 화면을 밀어 들어오면서 전환됨)
• Slide In (Move In과 Dissolve가 섞인 형태로 전환됨)
• Slide Out (Move Out과 Dissolve가 섞인 형태로 전환됨)

이렇게 위의 내용들을 바탕으로 설정하면 인터랙션을 만들 수 있게 된다.

참고 링크 :  https://www.codeit.kr/tutorials/61/understanding_figma_interactions

마우스드래그로 슬라이드되는 캐러셀을 만드는 방법

1. 슬라이드할 이미지 세가지를 일정한 간격으로 배치한 뒤 frame selection으로 감싸준다. Item Container라는 이름으로 정해보았다.

2. frame을 한번더 감싸고 이름은 View로 정해주었다.보여져야하는 크기(아이폰13 mini 기준이라 가로 사이즈는 375px로 설정)만큼 맞춰준다. 폴더 구조는 View > Item Container > Image01, Image02, Image03 이렇게 된다.

3. 프로토타이핑을 위해 각각의 이미지가 view의 중심에 왔을 때 3가지 경우를 만들었다. 이미지 하단에 네비게이션 바도 함께 배치했다. 

4. 위의 세가지 view를 모두 드래그하여 컴포넌트에서 create component set로 묶어준 뒤, 프로퍼티에서 각각의 values값을 정해준다. 

5. 생성된 컴포넌트 안의 이미지 순서대로 프로토타입으로 이어준다. 드래그했을 때 다음 이미지로 이어지도록 설정해야하므로 on drag를 사용하였고, change to로 가져올 이미지를 연결해주면 완성.!

팀과제를 진행하면서 발표를 위해 어떤식으로 보여줄지 열띤 토론을 하였다. 웹페이지 형태로 만든 결과물 안의 멤버 list를 클릭하면 각자의 상세정보를 팝업창 형태로 보여주는 것이었다. 팝업을 끄면 다시 리스트로 넘어가 다른 리스트를 누르고 상세정보를 확인한 후 닫는 식의 UX를 제공하면 발표할 때도 편리할 것 같았기 때문이다. 우선은 상세정보를 컴포넌트 형태로 만들고 엑스버튼도 생성하였다. 기존에 만들었던 웹페이지 위에 상세정보 팝업이 올라가져있는 형태로 만들기위해  overlay기능을 사용하였고, 이참에 정리를 해보려고 한다.

[overlay 사용하기]

1. 우측 패널에서 prototype 탭을 누른 후 팝업이 클릭할 영역의 프레임의 +부분을 꾹 눌러 드래그한다 

2. 드래그한 상태에서 띄워져야할 팝업창 프레임으로 연결해준 뒤 Interaction에서 옵션을 선택한다

3. 팝업창이니 On click과  Action은 Open overlay를 선택하였다. position은 센터로 하였고, background 효과도 선택하였다. close when clicking outside를 체크해 팝업 외부영역을 클릭하였을 때도 사라지도록 옵션을 설정하였다.

그럼 presentation view를 하였을 때 팝업창이 생성되는데, 문제가 있었다. 팝업창의 내용이 많아 아래의 내용을 잘려서 보이지 않았다. 해결방안으로 프레임을 씌워 스크롤을 생성하게 하는 것이었다. 

[팝업창이 하단이 잘릴 경우 스크롤 만들기]

1. 우선 프레임 하나를 생성한다
    (가로사이즈는 팝업창의 크기와 동일하게 설정했고, 세로는 보이고 싶은 만큼만 설정했다)

    Frame selection을 할 프레임의 fill모드가 채워져있다면 팝업 뒤로 프레임의 색이 보일 수도 있음

2. 생성한 새 프레임에 팝업창으로 띄울 프레임을 넣고, 딱 맞추기위해 top과 center로 정렬했다

3. 새 프레임을 우클릭하여 Frame selection(ctl + alt + G)을 설정한다.

4. 우측패널에서 prototype 탭을 누른 후 overflow를 vertical로 설정한다.

그런 후 overlay를 새프레임(Frame selection)에 연결하여 presentation view를 보면 팝업창이 스크롤이 되면서 잘리지 않게 되었다. 

강의노트 : https://teamsparta.notion.site/2-ca1d21ca028446b7bdb176196f9e38d6

2-1. 이번에 배울 것

프레임과 컨스트레인트

• 프레임 이해하기
• 컨스트레인트 살펴보기

오토레이아웃과 리사이징

2-2. 프레임과 그룹

2-3. 부모-자식관계와 레이어 정렬

자식이 있는 부모개체는 모두 화살표가 생성됨

균등분배

• Tidy up : 규칙적으로 그리드를 맞춰서 분배할때 유용한 기능(어느정도 정렬이 되어있을 때 동작함)
• Distribute vertical spacing : 수직간격 균등 분배(수직적으로 균등으로 분배 됨)
• Distribute horizontal spacing : 수평간격 균등 분배(수평적으로 분배 됨)

2-4. 오토 레이아웃 기능 살펴보기

오토레이아웃이란?

• 레이어를 쌓고 프레임을 배치하고 정렬하는 피그마의 핵심기능
• 다양한 디스플레이에 따라 레이아웃에 유연함을 만들어주는 가장 중요한 기능

코드블록의 구조

• 피그마에서 프레임으로 코드블록 생성 가능 → 다른말로는 컨테이너
• 컨테이너의 구조
  • 패딩 : 코드 블록 안에있는 바깥테두리. 실제 블록의 사이즈가 되는 내부 여백
  • 보더 : 코드블록 공간 바깥의 가장자리. 실제 코드 블록의 테두리
  • 마진 : 코드블록 바깥의 여백이자 다른 코드블록과의 간격

<aside> 💡

오토레이아웃 적용해보기

1. 텍스트를 생성한 후 마우스 오른쪽을 클릭하여 add auto layout(shift+A)을 클릭. → 그럼 자동으로 프레임이 씌어지게 되고 패딩값도 생성됨.
2. 텍스트를 생성한 후 frame selaction(control + alt + G)을 선택 후 오토레이아웃 클릭 → 오토레이아웃으로 속성이 바뀌고 패딩값은 추가되지 않음 </aside>

두가지 방식의 차이점 알기

프레임이 아닌 개체에 오토레이아웃을 적용하는 것 → 자동으로 패딩값이 적용 됨

이미 프레임인 개체에 오토 레이아웃 속성을 적용하는 것 → 패딩값은 추가되지 않음

간격 확인하는 법

• 개체를 클릭한 후 alt를 누르고 확인하고싶은 개체를 누르면 두개 사이의 간격 확인 가능

<aside> 💡

오토레이아웃 내부 프레임 순서

레이어 패널에서는 일반적으로 더 위에 있는 레이어가 더 앞에 있는 레이어다. 반대로, 오토레이아웃 프레임 안에선 더 밑에 있는 레이어가 더 앞에 있는 레이어예요.

</aside>

2-5. 프레임과 컨스트레인트

2-6. 프레임 리사이징

2-7. 포지션 이해하기

강의노트 : https://teamsparta.notion.site/1-5a61ba03b75c4fd88c6d9dd66257d1f2

1-1. 이번에 배울것

피그마란?

• 제품을 만드는 모든 사람을 위한 디자인툴이자 협업도구
• 디자인 협업도구에서 점차 팀 전체가 쓸 수 있는 종합적인 협업 툴
• 기획자, 마케터, 개발자를 위한 기능도 선보이는 중

피그마 특징

• 웹에서도 사용할 수 있어 접근성이 좋고 맥 윈도우 모두 사용가능
• 디자인부터 개발까지 올인원
• 강력한 커뮤니티로 각종 플러그인 사용가능
• 쉬운 학습

1-2. 피그마 소개와 설치

환경에 맞는 피그마 설치 후 계정 생성, 로그인

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

디스플레이(display)와 픽셀(pixel)

• 디지털 화면이며 픽셀이라는 작은 칸들로 이루어져 있음

해상도

• 디스플레이의 선명한 정도
• 디스플레이 안에 들어가있는 픽셀의 개수(1920*1080)

해상도와 픽셀의 관계

• 해상도가 같다면 화면 크기가 클수록 필셀 한칸의 크기도 커진다.
• 화면의 크기가 같다면 해상도가 높아질 수록 픽셀 한칸의 크기도 작아진다.
• 화면 크기가 클수록 해상도도 높다.
• 면적당 픽셀개수가 더 많으면 세밀한 묘사 가능

1배수 디자인

모바일의 경우 같은 앱이라도 어떤 스마트폰으로 열어도 항상 화면에 보이는 디자인의 위치나 배치가 동일해야한다

• 사람들이 가장 많이 쓰는 사이즈로 하는 것이 일반적(유의점: 내가 만들 앱을 쓸 사람들을 기준으로 하는 것이 좋음)
• 권장하는 1배수 사이즈
  • 예전 → 아이폰 : 320480 / 안드로이드 : 360640
  • 현재 → 아이폰 : 375812 / 안드로이드 : 360800

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

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

위 url로 접속하면 볼수 있으며 pixel Ratio(픽셀배율)에서 2.0이라고 적혀있다면 ‘이 기기는 2배수 사이즈라는 뜻’으로 이해하면 된다

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

이미지가 깨진다는 것?

컴퓨터가 그림을 그리는 방식

• 래스터(Raster) 방식
  • 비트맵방식이라고도 하며 픽셀칸에 색깔 칩을 하나씩 담는 형식
  • 특징
    • 해상도가 높을수록 화질이 좋음
    • 해상도가 낮은 이미지를 크게만든다고 화질이 좋아지지 않음
    • 확대와 축소를 반복하면 색상정보가 사라짐(흔히 깨진다, 열화됐다라고 말함)
    • 단순한 방식이라 고해상도 이미지를 표현하기 좋음 → 크고 화려한 이미지도 벡터에 비해 파일 크기가 작음(일반적으로 jpg가 가장 가볍고 png가 가장 무거움)
• 벡터(Vector) 방식
  • 그림을 수식으로 표현하는 형식으로 일러스트와 피그마가 대표적인 툴
  • 이미지라기 보다는 코드에 가까움
  • 특징
    • 확대 축소 등 크기 변형에 자유로움
    • 이미지가 크고 복잡하면 수식이 복잡해짐(깨지지 않는다고 무조건 svg형식은 안됨 어떤 이미지를 어떻게 보여줄지 적합한 확장자를 선택하여 사용하는 것이 best!)

해상도가 큰데, 그래픽이 깨질 때

• 작업시 습관적으로 화면을 확대해서 보는경우
• 실제 구현될 사이즈로 확인하는걸 깜빡했을때
• 이미 열화된 이미지를 강제로 키워서 해상도만 늘려둔 경우(이미 색상정보가 사라진 이미지는 사용 지양할 것)

1-5. 8포인트 그리드는 무엇일까

💡 8배수로 만든다는 규칙이 있고 8포인트 그리드 디자인(8-point grid design)이라 함

8포인트 그리드 디자인 개념

• 일반적으로 가장 많이 사용하는 규칙
• ui 8의 배수에 맞춰 배치하는 레이아웃 규칙
• ui사이 간격, 요소 여백, 크기등을 8의 배수단위로 조정하여 사용

왜 사용하는지

• 일정한 규칙이 있다면 서로 물어보는 번거로움과 비효율을 줄일 수 있음.
• 규칙을 적용하기만 하면 수월해짐

왜 8의 배수인걸까

• 2를 3번쪼갤수있고 나눈 숫자도 다시짝수
• 디자인 축소시 망가지지 않고 축소 가능
• 다른 수에 비해 딱 떨어지게 만들기 휘움
• 업스케일, 다운스케일에 유연하게 대처 가능
• 10이나 5도 가능하지만, 매끄러운 모양에 지장 (홀수는 불편한 편인가 봄 / .5일때에는 흐릿하게 나옴)

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

Drafts : 연습파일

Starred : 즐겨찾기

파일생성 4가지

1. new design file
2. figjam board
3. slide deck
4. import

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

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

1-9. 패스 알아보기