Figma 핵심! Auto Layout #2
기획자의 피그마 figma - 오토 레이아웃 auto layout
지난 시간에 이어 오늘도 Auto layout 을 이용한 실습입니다.
그리고 또 한가지 Figma 를 사용한다면 반드시 알아야 할 컴포넌트(Component) 만들기에 대해서도 알아볼게요.
*** 동영상을 통해서도 Auto layout 에 대해서 알아볼 수 있어요 :)
Auto layout 을 활용해서 컨텐츠 정렬하기
지난 시간에는 Auto layout 기능으로 버튼을 만들었었죠?
이전 시간에 도형으로 만들었던 버튼은 지우고, 우리가 새롭게 만든 버튼으로 배치시켰습니다.
출처 토스 웹사이트 https://toss.im/오늘은 우리가 만든 이 버튼을 포함하여 기존에 눈대중으로만 배치해놨던 ㅋㅋㅋ
사용자 프로필, 사용자 이름, 코멘트 영역까지 Auto layout 을 적용해보도록 하겠습니다.
1. 우선 상/하 나열이 되어있는 사용자 이름과 하단의 코멘트 영역을 그룹으로 만들어주세요.
잊지 않으셨죠? Auto layout 적용을 하기 위해서는 해당 에셋이 그룹 또는 프레임 상태여야 합니다.
김토스 + 내 신용점수는? 코멘트를 선택하여 그룹으로 만들어준 후 저는 이 그룹의 이름을 user profile 로 변경했습니다.
2. 그리고 이 그룹에 Auto laout 을 적용시켜보겠습니다.
이 그룹의 각 에셋은 세로 방향으로 정렬이 되어있죠? Direction 은 Vertical Direction 을 설정하고 Spacing, Padding 수치를 적절하게 조절해주었습니다.
3. 이번엔 프로필 사진 영역과 이 user profile 그룹을 함께 선택하여 다시 그룹으로 만들어줍니다.
이 그룹의 이름을 member로 지정해주었습니다.
이번 member 그룹에 속해있는 요소는 사용자의 프로필 사진과 user profile 그룹입니다.
이 두 에셋은 가로 방향, Horizontal 로 정렬이 되어있습니다. Auto layout 설정 역시 이에 맞춰 설정해주었습니다.
Alignment 의 경우에는 좌측 상단을 선택했습니다. 왜일까요?
예를들어 user profile 영역에 컨텐츠가 추가된다고 가정해볼까요?
현재 보이는 사용자의 이름 김토스 다음 라인에 회원의 레벨이 추가된다고 가정해보죠. 내 신용 점수는? 이 링크 메뉴 역시 보여질 예정입니다. 그럼 user profile 그룹의 height 사이즈가 늘어날 것입니다. 이 경우에도 프로필 사진의 위치 기준을 설정해줘야 합니다.
만약 Alignment 의 기준이 좌측 중앙으로 잡혀있다면, 늘어나는 컨텐츠 양에 따라 아래와 깉이 적용이 됩니다.
Alignment 를 좌측 중앙으로 설정한 경우Auto layout 을 설정할 때, 특히나 위의 경우처럼 여러 요소에 대한 Auto layout 설정할 때는 추후 발생할 수 있는 변동 사항에 대해 고려하여 기준 점을 설정하시기 바랍니다.
4. 자, 이제 member 그룹과 우리가 지난 시간에 만든 송금 버튼까지 포함하여 Auto layout 설정을 해볼까요? 일단 이 요소를 모두 선택해서 top 이라는 이름으로 그룹을 만들었습니다.
5. 이번 그룹에 속한 요소들은 가로 방향 배치, Horizontal Direction 으로 되어있습니다.
그리고 내부의 요소들이 모두 중앙 배치가 되면 좋을 것 같아 Alignment 의 기준점은 센터로 설정했습니다. 하지만 아이템 간 간격(Spacing between items)는 어떻게 설정을 해야할까요?
위 이미지처럼 이 간격을 100으로 설정한다면
이런 상황이 발생할 수 있습니다.
두 그룹 간의 간격은 늘 100을 유지하도록 설정했기 때문에 컨텐츠의 길이가 늘어나게 되면 일부는 화면 프레임 밖으로 나가는 현상이 발생할 수 있습니다.
자, 바로 이럴때 Alignment and padding 의 옵션을 바꿔주시면 됩니다.
기억하시나요? 이 레이어에는 Packed 외에 한가지 옵션이 더 있었죠? 바로 Space between 입니다.
이 옵션으로 설정하게 되면, Auto layout 옵션의 Spacing between items 은 Auto 로 변경되고, 이 그룹에 속한 아이템 간의 간격은 일정하게 유지됩니다.
Auto layout 기능의 활용도는 정말 높습니다.
특히 이 다음 시간부터 진행할 컴퍼넌트, 디자인 시스템 만들때 그 유용함을 더욱 더 크게 느끼실 수 있을거에요.
그럼 우리는 다음 시간에 만나요 :)
오늘도 고생하셨습니다~!!
#figma #피그마 #웹기획 #앱기획 #웹디자인 #오토레이아웃 #autolayout #피그마오토레이아웃
