노가다에서 해방되는 즐거움
일러스트레이터에서는 글자 길이에 맞춰 배경 박스를 늘리고, 내용을 수정할 때마다 박스 크기와 정렬을 다시 잡느라 많은 시간을 보냈습니다. 하지만 피그마에서 오토레이아웃을 적용해 보니, 텍스트의 길이에 맞춰 배경이 자동으로 반응하더군요.
 |
| 디자인으로 설계하다 |
글자 뒤에 바탕색을 넣고, 위아래 좌우 마진(Padding)을 설정하기만 하면 끝. 글자를 늘리거나 줄여도 그 길이에 맞춰 바탕이 조절되는 과정이 너무나 신기했습니다.
💡 간단 실습! 버튼 하나 뚝딱 만들기
1️⃣ 피그마에 접속하고 로그인합니다.
2️⃣ 화면 오른쪽 상단에 여러가지 메뉴가 보일텐데요, 이중에 맨 왼쪽에 있는 'Design' 선택!
 |
| [Design] 선택 |
3️⃣ 빈 화면에 프레임을 만들고 그 위에 텍스트를 입력합니다.
 |
| 프레임 위에 텍스트 입력하기 |
3️⃣ [Shift + A]를 누르면 텍스트에 바로 오토레이아웃이 적용되면서 프레임으로 감싸집니다.
4️⃣ 우측 패널에서 채우기(Fill)를 넣고(+ 선택해서 추가), Padding 값을 조절하면? 텍스트 길이에 딱 맞는 버튼 완성!
 |
| 간단한 버튼 만들기 |
특히 두 개 이상의 요소를 오토레이아웃으로 설정했을 때, 알아서 간격을 유지하며 정렬되는 모습은 정말 신세계였습니다. 일일이 마우스로 전체 선택해서 위치를 조정하던 수고를 덜어주니, 디자인 과정에서 느꼈던 피로감이 확 줄어드는 기분이었어요.
디테일의 발견? 모서리 설정의 자유로움
오늘 실습하며 또 하나 놀란 점은 모서리 라운딩(Corner Radius) 기능이었습니다. 기본 패널에 모서리 변경 도구가 바로 붙어있는데요.
 |
| 버튼 모서리 변경 |
디자인 일지 2일차 기록
처음 피그마를 마주했을 때는 그저 텅 빈 캔버스가 낯설기만 했는데, 이제는 기능을 하나씩 익히며 제 손에 맞게 도구를 길들여가는 재미를 알아가고 있습니다.
툴이 바뀌면 세상이 조금 달라 보인다고 하죠. 툴의 기능은 다르지만, 결국 어떤 환경에서든 디자인의 본질은 '사용자를 향한 배려'에 있다는 사실을 다시 한번 되새깁니다. 익숙했던 도구를 잠시 내려놓고 새로운 환경에 스스로를 던져보는 이 시간들이, 언젠가 저만의 디자인 언어를 한 층 더 풍성하게 만들어줄 것이라 믿습니다.
다음번에는 또 어떤 기능이 저를, 그리고 우리를 얼마나 놀라게 할지.. 다음에도 피그마라는 새로운 세계를 하나씩 탐색해 보려고 합니다.
📌 이 글과 함께 보면 좋은 콘텐츠
댓글 없음:
댓글 쓰기