[TIL] #26. 피그마 마무리 & 피그잼으로 UI / UX 분석

2022.4.26. (화)

1. 오늘의 소감

• ✌️백준 솔브닥(solved.ac) 에서 실버를 땄다!🥈
• 6월 4일, 처음 백준 세팅하고 문제 풀이 시작할 때가 엊그제같은데 이제 매일 백준을 풀고 깃헙에 올리는 게 제법 익숙해졌다. 백준 덕분에 깃헙 잔디도 순조롭게 심어지고 있고😁! 물론 아직 초반의 난이도가 낮은 문제 위주로 풀긴 했지만;; 그래도 코딩 테스트에 조금은 자신이 붙었다!

• 피그잼은 피그마가 제공하는 협업용 화이트보드 툴이다. UI / UX 분석을 위해 사용해봤는데 진짜 사용하기 편하고, User Flow 도 간단하게 만들 수 있어서 좋았다. 무엇보다 피그잼 UI 가 너무 깔끔하고 쓰고 싶게 생겼다! 이 모든 기능을 무료로 제공하는 피그마 팀에게 압도적 감사를…
  • 👉 페어님과 같이 만든 피그잼 UI / UX 분석 과제
  • 피그잼을 사용하면 이렇게 완전 깔끔한 User Flow를 만들 수 있다.
  • (오른 클릭 → copy to PNG 하면 이렇게 PNG 로 저장할 수도 있다!)

• 차트나 내용 정리하기도 엄청 좋다!

• 텀블벅 클론 디자인을 하면서 각 페이지마다 변형되는 헤더 어떻게 처리하는 게 좋을 지 고민이 되었다. 나는 복잡하게 바리에이션을 다 만들어줘야하나 했는데, 우리 페어님은 그냥 모든 상태가 적용된 디자인의 컴포넌트를 만들고 각 인스턴스마다 약간씩 수정해서 간단하게 처리하셨다…. 세상에👏👏 울 페어님 천재!
• ⇒ 이렇게 한 페이지 안에서 변경(change to)되는 컴포넌트가 아니라, 페이지마다 고정된 형태라면 굳이 컴포넌트 셋으로 만들 필요가 없어 보인다. 그냥 헤더에 모든 디자인 상태를 넣어주고 인스턴스마다 수정해주는 게 편하다.

• 오늘 코플릿 문제는 ‘타일링 문제’였다. 타일링 문제는 코드가 어렵다기 보다는 이 문제를 이런 방식으로 풀 수 있다는 생각을 끄집어 내기가 힘들었다. 막상 풀이 방법을 알고나니, 피보나치랑 똑같은 문제라는 점에서 놀랐고… 이 문제를 이런 식으로 생각해 풀 수 있다는 게 신기했다! 와…하고 무릎을 탁 쳤다…! 이제 방법을 알았으니, 비슷한 타일링 문제들은 다 해결해 볼 자신이 생겼다.

2. 학습한 키워드

• 피그마 익숙해지기

3. 키워드를 바탕으로 학습 내용 설명해보기

• 피그마 단축키와 좀 더 익숙해졌다. 중요한 단축키들만 나열해 보면 다음과 같다.
  • 복제하기 & 인스턴스 생성 : opt 누른 상태로 드래그
  • 간격 측정하기 : 요소를 선택한 상태에서 opt 누르고 다른 요소에 마우스 울려놓기
  • 요소 삭제 : 백스페이스
  • 요소 프로퍼티(속성)만 복사 : cmd + opt + C
  • 오토 레이아웃 만들기 : shift + A
  • 복제 + 복제 액션 반복 : cmd + D