brunch

라이킷 10 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 미소지나 Oct 24. 2022

오토레이아웃 3. 좌측 2Depth 메뉴 만들기

피린이 탈출기원 프로젝트

오토레이아웃을 잘 활용할 수 있는 좌측 2Depth의 메뉴를 만들어 보겠습니다.

요즘 웹의 특성상 이런 좌측에 떨어지는 메뉴는 많이 사라졌지만,

관리자나 카페같은 특정페이지에서는 사용자들이 아직까지 많이 사용하고 있고,

자주 볼 수 있는 레이아웃입니다.

제가 현재 작업하고 있는 관리자페이지의 메뉴를 오토레이아웃을 활용하여 수정이 용이하며 사용이 편리하게끔 피그마에서 만들어줄겁니다.

제가 생각했을 때 오토레이아웃은 가로정렬을 할 때나 반응형 사이즈를 만들때도 물론 유용하게 쓰이지만,

세로로 나열하는 리스트로 활용했을 때 빛을 발하는 것 같습니다.

세로로 복붙하면 하단에있는 레이어들이 뒤로 밀리면서 중간에 있는 컨텐츠를 수정하더라도

하단에 있는 컨텐츠를 따로 수정할 필요가 없기 때문에 너무너무 효율적으로 쓸 수 있습니다.

하지만 오토레이아웃을 처음 접해보신다면 조금 헷갈리실 수 있기 때문에

예습을 3번 이상 따라해보는 것을 권장합니다 :)

지금 여러분이 투자하는 20분이

20년 동안 작업한 내 손보다 빨리 수정할 수 있는 효율을 낼 수 있기때문에

20분의 가치는 어마어마하다고 생각합니다!

피그마를 배우면서 느끼는 생각은 하루라도 빨리 피그마를 마슷허해야겠다는 생각뿐입니다.

따하하하하핫 그렇다면 귀찮으 준비 하시고, 예제를 한번 같이 따라해보시죠 :)

레고레고 !!

1. 메뉴의 아이콘과 이름을 적고 2Depth를 열어줄 화살표까지 메뉴에 필요한 요소들을 만들어줍니다.

2. 이제 이 메뉴의 요소들을 다같이 묶어서 오토레이아웃 설정을 해줍니다. 메뉴 세로 사이즈에 맞추어 위아래 여백을 설정해줍니다. 저는 6으로 설정해주었습니다.

3. 맨 오른쪽 화살표 버튼은 가로영역에서 오른쪽 방향에 고정으로 픽스되어 있어야 하므로, 화살표 설정창에서 오른쪽 상단 두번째에 있는 앱솔루트 오토레이아웃 버튼을 눌러줍니다. 이 앱솔루트 버튼을 누르면 합쳐진 레이아웃과는 상관없이 위치를 고정시켜 줄 수 있습니다. 이제 설정창에서 방향을 오른쪽으로 고정시켜줍니다. 그러면 가로길이를 움직여도 이 화살표는 항상 오른쪽에 위치하고 있게됩니다.

4. 오토레이아웃 설정을 해주고 세로 오토레이아웃 설정도 해줍니다. 그러면 복사해서 붙여넣을때 자동으로 하단이 늘어나게 됩니다.

5. 투뎁스로 나오는 메뉴명을 적고 오토레이아웃 설정을 해줍니다.

화살표 방향을 아래로 잡아주고 투뎁스로 인지할 수 있게 죄측에 여백을 추가해 일정 간격을 떨어트려줍니다.