[+2] 프레임·오토레이아웃·컨스트레인트·리사이징
🚩오늘의 키워드
- 온보딩 강의 수강(체계적으로 배우는 피그마 기초 완전 정복·UXUI 입문)
- 강의 내 개인 숙제 진행
- 튜터님 소개 세션
🤔TODAY I LEARNED
[UX/UI입문 - 1주차 숙제]
1주차 때 배운 내용을 바탕으로 내가 자주 쓰는 서비스 뜯어보기라는 숙제가 있었다. UX/UI 관점에서 화면을 분석 해 보는 숙제였는데
1. 자주 쓰는 서비스 선정
2. 눈에 띄는 요소 1~3개 찾기
3. 관련 디자인 가이드를 찾아 찾은 디자인이 가이드 대로 잘 디자인 되었는지 정리해보기. 의 순으로 진행하면 되는 거 였다!
평소에 웹툰이나 웹소설 읽는 것을 좋아해서 많은 플랫폼 중, "리디북스"를 선정하여 분석해보는 시간을 가졌다.
내가 자주 사용하는 서비스 뜯어보기 - 리디북스
[UXUI 디자인 입문 - 1주차 UX/UI 관점에서 화면 분석해보기]
zzilog.tistory.com
아직 용어와 명칭도 익숙하지 않아 맞게 분석했는지는 의문이지만 여러 사이트를 뒤져가며.... 눈에 띄는 몇 가지를 정리했다..!
[체계적으로 배우는 피그마 기초 완전정복 - 2주차]
① 프레임과 그룹의 차이
· 프레임 : 피그마 디자인의 기본 단위로 코드 블록을 만드는 기능이자 실제 화면으로 인식되는 개체.
프레임 안에 다른 개체나 프레임을 넣을 수 있기 때문에 컨테이너라고도 부른다. 즉, 프레임=컨테이너
· 그룹 : 편의를 위해 여러가지 개체를 하나로 묶는 기능으로 개발에 필요한 속성 적용 불가능!
→ SVG 이미지로 인식하면 편하다.
어도비 프로그램을 사용할 때는 거의 그룹 기능을 많이 사용했는데, 피그마에서는 99%의 경우는 프레임을 사용함..!
Q. 사진 이미지를 제외한 모든 부분을 프레임으로 작업하는 걸까..?
② 부모-자식 관계와 레이어 정렬
· 감싸고 있는 것과 감싸진 것의 관계를 부모-자식 관계라고 부름.
레이어가 위에 있을 수록 나에게 더 가까이 있다. 즉, 레이어가 더 위에 있다.
· 부모 개체 안에 자식 개체가 여러개 있을 때 프레임을 하나만 잡고 정렬할 경우 부모가 기준점,
여러개 잡고 움직였을 때는 서로가 기준점이 되어 움직인다.
③ 오토레이아웃 - 오토레이아웃 패널에서 조정가능 (단축키 Shift + A)
· 우리가 보는 화면의 디자인은 모두 코드 블록으로 이루어져있는데, 피그마에서 코드블록은 프레임! 즉 컨테이너.
컨테이너는 패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격으로 이루어져 있다.
→ 모든 코드 블록은 내부 개체 + 개체를 둘러싼 패딩. 즉, 개체의 크기 + 패딩
④ 컨스트레인트 - 부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할 건지를 설정 가능.
파란점선이 바로 컨스트레인트로 자식 컨테이너가 부모에 고정되어 움직이는 핀의 위치를 뜻한다!
왼쪽과 위쪽에 점선이 나타나있다면, 왼쪽과 위쪽이 고정된 채로 따라옴!!
🌟 ⑤ 리사이징 - 프레임의 기본값 Fixed(가로, 세로 고정) 상태를 오토레이아웃으로 감싸면 서로 영향을 주고 받을 수 있는 새 사이즈 값이 생김!
· fixed : 고정값 (공통)
· hug : 자식 컨테이너의 크기에 맞춰 조정 (부모만)
· fill : 부모 컨테이너 크기에 맞춰 조정 (자식만)
→ 자식이 고정값(fixed)이면 부모는 감싼다(hug)
자식이 부모에 맞게 늘어나야하는 경우(fill)이면 부모는 고정값(fixed)
부모가 감싸야하는 경우(hug)면 자식은 고정값(fixed)
부모 자식 둘 다 fixed도 가능!
Q. 안에 컨테이너가 여러개라면..?
⑥ 포지션 : 요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때 사용하며, 총 4가지
· Static(스태틱) : 기본 포지션, 스크롤을 하면 따라 움직임
· Fixed(픽스드) : 항상 고정된 위치에 존재 'ex) 헤더나 앱 하단 버튼'
· Absolute(앱솔루트) : 픽스드와 비슷하지만, 부모 컨테이너를 기준으로 고정
· Sticky(스티키) : 스크롤에 따라 움직이다가(스태틱), 특정 위치부터는 상단에 고정(픽스드)
🫠 오늘의 회고
1주차 강의와는 다르게 생각보다 개념이 많이 헷갈렸다. 특히 오토레이아웃~ 리사이징 부분이 제일 헷갈리고 몇 가지 의문사항들이 생겼다.
원래의 계획은 피그마 기초 강의와 uxui 개념 강의를 1강씩 듣는 거였지만 uxui 개념 강의는 절반 정도밖에 듣지 못했다😶..
개념을 이해하려면 많이 만들어보고 만져봐야 이해가 될 것 같은 느낌? 내일은 피그마 기초 강의 복습, 강의를 토대로 피그마를 직접 만져보면서 친해지는 시간을 가져야겠다..!