TIL 6일차 - 피그마와 친해지기

오늘은 UI/UX 레이아웃 툴인 피그마를 실습했다. 피그마를 설치하고 실습 파일을 열어보니 다음과 같은 화면이 있었다.

빈공간에 단축키 T를 눌러 텍스트를 추가하고 화면 오른쪽 버튼에서 텍스트의 스타일을 추가하였다.

이 텍스트 스타일은 한 번 지정 해놓으면 여러 텍스트에 클릭 몇 번만으로 지정해 둔 폰트나 크기, 굵기 등을 언제든 가져다 쓸 수 있어 텍스트 인터페이스의 통일성을 주기 편리하고, 여러 팀원들과 같이 제작할 때도 혼란 없이 제작 할 수 있는 환경을 만들 수 있는 설정이었다.

‘Headline/Bold/26’이라고 적었는데, 스타일의 이름과 굵기, 크기를 각각 ‘/(슬래시)’를 통해 구분지었다. 컴퓨터 파일과 폴더의 하위 목록 개념과 비슷하게 ‘/’를 통해 이름의 하위에 굵기 설정, 굵기 설정 하위에 크기 설정을 지정한 것이다.

실습 파일의 화면에 여러 폰트가 있었기 때문에, 똑같이 메인 타이틀의 설정이 될 Headline, 서브 타이틀이 될 Sub Title, 소제목과 본문 내용이 될 Body, caption의 스타일을 추가하였다. 전부 설정하고 나서 빈 공간을 클릭하면 화면 오른쪽에 추가한 스타일의 목록이 나오는 것을 알 수 있었고, 새로 글자를 추가할 때 텍스트를 클릭한 뒤 화면 오른쪽에서 스타일을 고를 수 있는 것도 확인하였다.

 

또 아이콘을 컴포넌트로 등록하는 방법도 배웠다. 아이콘을 각각 지정하여 컴포넌트로 등록하거나, 드래그해서 한번에 지정한뒤 Create multiple components를 사용하여 한번에 컴포넌트로 등록하였다. 컴포넌트로 등록하면 아이콘이 보라색으로 변하는데 이 컴포넌트로 등록된 아이콘을 Option키와 함께 드래그해서 복사하면, 복사된 아이콘은 인스턴스가 된다.

복사된 인스턴스들은 나중에 설정을 변경하고자 할 때 일일이 변경할 필요 없이 컴포넌트 아이콘의 설정만 변경하면 다같이 변경되어 편리하다. 다만 유의해야 할 것은 인스턴스의 설정을 변경해버리면 컴포넌트의 설정을 변경해도 설정을 바꾼 인스턴스에는 적용되지 않으니 아무 생각없이 함부로 인스턴스의 설정을 바꿔대선 안된다.

다음은 오토 레이아웃에 대해 실습했다. 오토 레이아웃은 지정한 값이나 비율에 따라 자동으로 객체나 개체 사이의 간격을 맞추는 기능이다.

텍스트를 추가한 뒤 Shift + A를 통해 오토 레이아웃을 적용 시킨 모습이다. 그 상태에서 화면 오른쪽의 Auto layout의 설정을 조절해 실습 파일의 예제 라벨과 같이 레이아웃과 텍스트의 간격을 맞추고 정렬시킨다. 그런 다음 Appearence의 corner radious 값을 조절해 둥그런 배경을 만든 뒤 fill 부분을 조절해 배경색을 채우고 Selection color에서 글자색을 조절하였다.

이런식으로 실습 예제의 라벨과 같은 모양의 오토레이아웃을 만들었는데 그냥 만들면 되지 왜 굳이 오토 레이아웃으로 만들었는가 하면, 오토 레이아웃으로 만든 라벨은 오른쪽과 같이 라벨의 글자가 바뀌게 되더라도 그 모양과 간격이 유지되는 장점이 있다. 물론 이것은 resizing의 설정을 hug content 상태로 했기에 가능한 것인데, fixed로 설정을 바꾸게 되면 너비나 높이가 고정되어 내용에 따라 프레임을 벗어나거나 빈공간이 넓게 유지된다.

오늘 배운 내용은 여기까지이고 어려운 내용은 전혀 없었는데, 정말 당황스러운 것이 강의 속 피그마와 내가 설치한 피그마의 버전이 다른 것인지 UI가 많이 달라 설정 버튼들을 찾는데 어려움을 겪었다. 사실 강의 화면 속 UI와 내 화면의 UI가 다른 일은 자주 있는 일이니 좀 답답하긴 해도 어떻게든 찾아내서 배우는 건 학생의 몫인 것 같다.
물론 그것 때문에 40여분 정도의 강의 내용을 두시간에 걸쳐서 찾아해매긴 했지만 그래도 이렇게 TIL을 작성하며 다시 한 번 피그마의 UI에 대해 복습하고 나니 이제는 나름 수월해진듯 하다. 전문적인 수준의 내용이 아니라 피그마라는 툴과 친해지라는 취지에서 진행했던 강의이니 정말 취지에 맞게 배우고 있다.
당장 필요한 건 UI를 꾸미는 기술보단 코딩 공부를 해야하겠지만, 어떤 기능이나 디자인이 가능한지 알고 하는 것과 모르고 하는 것은 완전히 다르기 때문에 사전캠프 기간인만큼 이런 공부가 병행되는 것도 즐거운 일인듯 하다.