서론
이번 수업시간에는 실무에 들어가기에 앞서 Figma의 UI구조를 알아보고 이를 토대로 앱/웹의 기본 레이아웃을 그리기, 이틀차에 분석했던 앱의 레이아웃 구조를 잡아보는 시간을 가졌다.
Figma의 UI구조
> Layout
가장 처음 'Figma'를 들어가면 이렇게 기본적인 구조가 반겨준다.
> Layers
'Figma'는 기본적으로 레이어 방식으로 구성되어있다.
※'Section' 은 'Frame'의 상위개념으로, Title 설정이 가능하며 화면을 축소할 때에도 작업중인 부분의 Title이 바로 확인이 가능하다
※ 'Frame'은 'Rectangle'과 비슷해 보일 수 있지만 요소를 레이어 안에 포함시킬 수 있느냐, 없느냐의 차이로 나뉘어진다.
ex) Export할 경우 Frame은 하위 구조가 포함된 상태/Rectangle은 Rectangle 개별
보통 'Frame'으로 작업하는 게 대부분인데 이는 사용이 간편하고 'Auto layout' 기능을 사용할 수 있다는 이점이 있기 때문
> Tools : Shape Tools
'Figma' 안에는 기본적인 도형을 그릴 수 있는 도구들도 존재한다.
※ 'Arrow'는 기본적인 'Line'에 끝부분이 화살모양으로 설정된 상태라고 생각하면 되는데 보통 도식화할 때 많이 사용된다.
※ 'Ellipse'는 'Arc'를 사용해 파이모양을 만들 수 있고 이는 표, 차트를 만들 때 유용하게 사용된다.
※ 'Polygon'와 'Rectangle'은 'Radius'를 통해 꼭짓점을 둥글게 설정할 수 있으며 'Polygon'은 Count로 꼭짓점 개수를 설정할 수 있다.
여기서 특이한 점은 ios는 'Radius'를 사용할 때 Window와 다르게 직선을 고려하지 않고 곡률을 만들어내기 때문에 완전한 원이 만들어지는 경우가 있다.
> Tools : Shape Tools Selection
이외에도 도형을 활용한 여러가지 기능이 있는데 Adobe나 Rhino에서 보던 'Pathfinders'기능이 'Figma'에도 있는 걸 확인 할 수 있다.
> Tools : Scale, Text, Comment, Actions
Scale : 'Scale'은 하위 Text가 있을 때 Text Size에도 영향을 미친다.
Font : Font는 보통 'Pretendard'를 가장 많이 사용한다.
Text : Resizing으로 사이즈를 설정해야 Text가 잘리는 등의 상황이 발생하지 않는다.
※ 더보기→Case에서 대문자, 소문자, Mix 설정 등 아주 유용한 기능이 있다.
※ 더보기→Vertical Line으로 끝선에 맞춰서 Text를 자유롭게 정렬할 수 있다.
Comment : 'Show Resolved'를 통해 완료된 Comment를 다시 볼 수 있다.
Actions : Iconify에서 여러 Logo, Pictogram를 추가 할 수 있다.
> Options
※ 'Stroke'는 파란선을 기준으로 조절이 가능하다.
※ 'Effects'에는 'Background Blur' 효과를 주는 옵션이 존재하는데 투명도를 적용하고 이 효과를 사용하면 뒷 배경이 블러 처리가 된다.
'Background Blur'는 'Figma'에서 처음 접해보는 기능이라 흥미로웠다.
> Options : Fills(Gradient, Image)
디자인을 하는 데 있어서 색선택은 필수인 만큼 'Figma'에도 여러 색 설정에 대한 도구가 있었다.
※ 색상, 투명도, 질감은 모두 'Fill'에서 적용이 가능하다.
여기서 색상선택은 항상 디자이너의 머리를 뜨겁게 만드는 존재인데 'Adobe' 홈페이지의 Colorchip의 도움을 받으면 된다. 색 하나만 지정을 해도 어울리는 색을 자동으로 찾아주는 아주 똑똑한 친구!
'Adobe Color Wheet'
Layout 구조 잡아보기
이번에 배운 'Figma'의 기초적인 도구를 사용해 'Naver'앱과 웹의 구조를 알아보고 이전 수업에 내가 분석했던 'CGV'의 앱과 웹의 구조를 잡아보는 시간을 가졌다.
앱과 웹의 전체 Screen shot은 'Crome'의 확장 프로그램을 사용했는데 모바일로 변환까지 가능한 친구라 아주 신기했다.
다음에 다른 웹이나 앱을 분석해보고 싶을 때 유용하게 사용할 것 같다.
기본적으로 Wed site는 항상 어디로 갈 지 선택하는 Header의 영역을 상단에 배치 (Tool, Navigation 포함), 그 아래 전체적인 Body와 Footer가 있었다.
▼아래는 내가 'Figma'를 활용해 잡아본 'CGV'의 앱과 웹 구조이다.
<'CGV' 앱/웹 구조 잡아보기>
과제를 진행하며 웹이나 앱을 구성하는 기본 요소들의 정확한 명칭과 배치에 대해 알 수 있었고 그 안에서 세부요소들을 어떻게 배치하느냐에 따라 사용자에게 확연한 차이가 보여질 수 있겠구나를 알게 되었다.
