Figma 챕터를 마무리하며 (~Day21 까지)

정말 정신없는 2주가 흘러갔다.

배운 내용을 복습 포스트로 꾸준히 올리고 싶었는데, 생각보다 쉽지 않았다. 피그마에는 아직 모르는 기능이 많았고, 컴포넌트 구조를 잡거나 레이어 순서를 정리하다 보면 예상보다 시간이 훨씬 오래 걸렸다.

와이어프레임은 비교적 빠르게 그릴 수 있었지만, 디자인 작업으로 들어가니 툴을 더 깊게 이해해야 하는 순간이 많았다. 화면을 예쁘게 만드는 것만으로는 부족했고, 나중에 수정하기 쉬운 구조를 만드는 일까지 함께 고민해야 했다.

배웠던 이론들은 시간이 날 때 차차 정리해볼 예정이다.

 

이번 글에서는 우선 새롭게 알게 된 점과 아직 어려웠던 부분을 기록해보려고 한다.

---

1. 새롭게 알게 된 점

이번 과정에서 가장 기억에 남는 건 컴포넌트와 인스턴스를 구조적으로 사용하는 방법이었다.

Bottom Bar를 만들 때 아이콘을 별도의 컴포넌트 세트로 분리하고, 활성화 상태를 다른 컴포넌트 세트로 정의한 뒤 Nested Instance로 연결하는 방식을 배웠다.

이때 아이콘 설정이 꽤 중요했다.

• 아이콘 비율 고정은 꺼두기
• 아이콘 width는 Fill이 아니라 Fixed로 설정하기
• 아이콘 크기는 보통 24px 정도로 고정하기

아이콘을 Fill로 설정하면 Bottom Bar 안에서 터치 영역과 충돌이 생길 수 있었다. 특히 터치 영역을 넓게 잡았을 때 아이콘 간격이 의도치 않게 벌어지는 문제가 생겼다. 아이콘 자체는 고정된 크기를 유지하고, 터치 영역은 따로 관리하는 편이 더 안정적이었다.

Nested Instance를 적용한 뒤 확인하는 방식도 새롭게 알게 됐다.

컴포넌트 자체에서는 하위 옵션을 바로 조정할 수 없기 때문에, 적용이 잘 되었는지 보려면 인스턴스를 만들어서 확인해야 했다. 나는 계속 컴포넌트 안으로 들어가서 옵션을 바꾸려고 했는데, 굳이 그럴 필요가 없었다. 인스턴스를 만들어서 확인하는 방식에 익숙해지는 게 더 중요했다.

인스턴스 스왑을 할 때는 스왑 대상이 모두 컴포넌트로 만들어져 있어야 했다. 아이콘, 버튼, 이미지처럼 바꾸고 싶은 요소가 있다면 먼저 컴포넌트로 정리해두어야 한다.

Rename 기능으로 레이어 이름을 한 번에 바꾸는 방법도 처음 배웠다. 작업량이 많아질수록 레이어 정리가 필요해지는데, 일괄 Rename 기능은 꽤 유용하게 쓸 수 있을 것 같다.

---

2. 막히거나 어려웠던 부분

아직 가장 헷갈리는 부분은 Nested Instance를 쓰기 위해 컴포넌트를 Auto Layout으로 잘 묶는 과정이다.

Fill, Fixed, Hug의 뜻은 어느 정도 알겠지만, 이 옵션들이 컴포넌트나 프로퍼티 안에서 어떻게 작동하는지는 아직 손에 익지 않았다.

아이콘만 따로 볼 때는 문제가 없어 보이는데, Bottom Bar 안에 넣고 컴포넌트로 만든 뒤 활성화 상태까지 연결하면 예상과 다르게 간격이 벌어지거나 크기가 달라지는 경우가 있었다. 옵션의 뜻을 외우는 것보다 여러 번 만들어보면서 구조에 익숙해지는 게 더 필요해 보인다.

인스턴스 스왑이나 텍스트 프로퍼티도 아직은 어색하다.

기능은 배웠지만, 어떤 상황에서 쓰면 좋은지 더 경험해보고 싶다. 실제 업무에서 명확한 목적이 있는 상태로 사용해보면 지금보다 훨씬 잘 이해할 수 있을 것 같다. 지금은 기능을 따라 적용하는 단계라서 아직 자연스럽게 쓰기까지는 시간이 더 필요하다.

이미지 스왑도 많이 어렵게 느껴졌다.

특히 실습 중 Item을 Property Variant로 묶고, 다시 Item으로 바꾸는 과정이 헷갈렸다. 아이콘 스왑과 원리는 비슷한 것 같지만, 폴더 이름을 정리하는 방식이나 구조를 잡는 과정이 아직 익숙하지 않다.

---

3. 이번 과정을 마치며

이번 피그마 과정에서는 화면을 빠르게 그리는 것보다 구조를 잘 잡는 연습을 많이 했다.

컴포넌트, 인스턴스, 오토레이아웃, 프로퍼티, 인스턴스 스왑은 처음엔 복잡하게 느껴졌지만, 반복 작업을 줄이고 디자인을 일관되게 유지하려면 꼭 필요한 기능들이었다.

아직 완전히 능숙하게 다루지는 못하지만, 어떤 부분을 더 연습해야 하는지는 조금 분명해졌다. 앞으로는 기능을 따라 하는 것에서 끝내지 않고, 화면을 만들 때 어떤 구조로 설계하면 수정하기 쉬울지 함께 고민해보고 싶다.

많이 만들어보는 게 제일 좋은 복습인 것 같다.
헷갈렸던 부분들도 계속 반복하다 보면 조금씩 자연스러워질 것 같다.