오즈코딩스쿨 디자인 캠프-오토레이아웃은 아직도 무섭다 — 컨스트레인츠와 반응형까지 (day 13)

 

 

어제 오토레이아웃이랑 그렇게 씨름을 했는데 오늘 또 피그마라니. 그래도 오늘은 어제 배운 걸 한 번 더 다지는 추가 실습으로 시작해서, 컨스트레인츠라는 새 개념까지 나가는 날이었다. 하루 종일 손을 움직였고, 머리보다 손이 먼저 기억하게 만드는 게 목표인 날이었다.

수업은 크게 네 파트로 굴러갔다. 오토레이아웃 추가 실습, 컨스트레인츠, 반응형/적응형 개념, 그리고 마지막 반응형 디자인 실습.

1. 오토레이아웃 추가 실습 — 머리가 한 번 리셋됐다

오전엔 어제 배운 오토레이아웃을 다시 꺼냈다. 오토레이아웃 패널이 6가지 영역으로 나뉜다는 걸 다시 짚고 넘어갔다. 방향(플로우), 너비·높이, 정렬, 갭, 비율, 패딩. 분명 어제 봤던 건데 하룻밤 자고 나니 머리가 리셋돼 있었다. 강사님도 "계속 써보면서 익히는 게 제일 빠르다"고 했고, 그 말이 맞다는 걸 손으로 확인하는 시간이었다.

첫 실습은 기존 화면을 보기 좋게 고치는 거였다. 잘려 있는 '커리어 중간점검' 박스를 안의 콘텐츠를 다 감싸도록 고치고, 캐러셀 디스크립션이 영역에 꽉 차도록 만드는 작업. 박스는 너비를 **허그(Hug)**로 바꾸고 중앙정렬을 해주니 깔끔하게 들어갔고, 디스크립션은 **필 컨테이너(Fill)**로 바꾸니 부모 요소에 꽉 차게 변했다.

여기서 오늘의 첫 깨달음. 필(Fill)은 자식 요소에만 나타난다. 겉에서 감싸는 게 부모, 그 안에 든 게 자식인데, 계층에 따라 부모와 자식이 계속 바뀐다. 그래서 필을 수정하려는데 옵션이 안 보이면 "내가 지금 자식이 아니라 부모를 잡고 있구나" 하고 의심해야 한다. 오늘 이 부모-자식 헷갈림으로 막힌 사람이 한둘이 아니었다.

그다음은 랩(Wrap) 기능. 카드 4개를 묶어두고 화면을 좁히면, 옆으로 나란히 있던 게 줄을 못 버티고 아래로 툭 내려가는 기능이다. 오토레이아웃 패널에서 화살표가 돌아가는 아이콘을 켜면 된다. 줄바꿈됐을 때 위아래 갭이 좌우랑 달라서 어색했는데, 갭 값을 14로 통일해주니 세로로 떨어질 때도 정리가 됐다.

갭 오토(Auto)도 해봤다. 두 요소 사이 간격을 고정값 대신 'Auto'로 넣으면, 부모 너비에 따라 알아서 벌어진다. 양끝 정렬 같은 효과인데 고정값이 아니라서 화면이 바뀌어도 자연스럽게 반응했다.

마지막은 그리드 베타 실습이었다. 이건 좀 새로워서 강사님이 먼저 시연했다. 이미지 6개랑 헤더를 가져와서 오토레이아웃으로 묶으면 처음엔 세로나 가로로 배열되는데, 패널에서 네 번째 그리드 아이콘을 누르면 격자가 된다. 숫자를 눌러 4x4로 바꾸고, 여기서 중요한 두 가지를 꺼야 했다. 하나는 옆에 꾸불꾸불한 화살표(자동 재배치)인데, 이게 켜져 있으면 이미지를 옮길 때 자꾸 뒤에 가서 달라붙는다. 다른 하나는 비율 고정인데, 켜져 있으면 줄였을 때 이미지가 칸에 고정되지 않고 따라 올라가 버린다. 둘 다 끄고 나서 각 이미지를 칸에 맞춰 배치하고, 가로 간격 맞추고, 헤더랑 묶어서 패딩이랑 배경색까지 넣으니 그럴듯한 그리드가 됐다.

다만 강사님이 그리드는 아직 베타라 실무에선 불안정할 수 있다고 했다. 그래픽 작업할 땐 유용해 보이긴 했다.

2. 컨스트레인츠 — 흐름이 아니라 위치를 다루는 기능

오후의 첫 새 개념은 컨스트레인츠(Constraints)였다. 오토레이아웃만큼 중요하다고 강조했는데, 둘의 차이를 잡는 게 핵심이었다.

오토레이아웃은 콘텐츠 흐름이 중심, 컨스트레인츠는 위치가 기준.

오토레이아웃은 안에 든 내용물에 따라 요소가 변할 때 쓴다. 어제 상품 이미지랑 타이틀을 리스트로 쭉 나열했던 것처럼. 반면 컨스트레인츠는 부모 프레임 크기가 바뀔 때, 그 안의 레이어가 어느 방향을 기준으로 고정되거나 늘어날지를 정하는 기능이다. 강사님은 "상자가 커지거나 작아질 때 안에 든 장난감이 어느 벽에 붙어 있을지 정하는 규칙"이라고 비유했는데, 이 그림이 머리에 잘 박혔다.

대표적인 예가 플로팅 액션 버튼이다. 걔는 다른 요소랑 관계를 맺는다기보다, 화면을 기준으로 항상 오른쪽 하단에 딱 붙어 있다. 이런 위치 대응이 필요할 때 컨스트레인츠를 쓴다. 헤더 로고는 왼쪽, 닫기 버튼은 오른쪽 상단, 검색창은 양옆 고정으로 너비가 유연하게 늘어나는 식.

컨스트레인츠 옵션도 정리해뒀다.

방향옵션언제 쓰나

가로	Left / Right	로고, 햄버거 메뉴, 프로필 아이콘 등 가장자리 고정
가로	Left and Right	검색창, 입력 필드처럼 너비에 맞게 늘어나야 하는 요소
가로	Center	제목, 로고, 메인 콘텐츠 중앙 정렬
세로	Top / Bottom	헤더·상단바(Top), 하단 내비·푸터(Bottom)
세로	Top and Bottom	스크롤 콘텐츠, 세로 리스트, 사이드바
둘 다	Scale	이미지, 지도처럼 비율 유지하며 늘어나는 요소

여기서 스케일(Scale)이랑 'Left and Right(가로 고정)'의 차이를 직접 비교했는데, 이게 헷갈리기 쉬웠다. 가로 고정은 양옆 간격을 그대로 유지하면서 늘어나고, 스케일은 비율을 생각하면서 늘어난다. 같아 보이는데 늘려보면 미세하게 다르게 움직였다.

실습은 오토레이아웃을 안 쓰고 컨스트레인츠만 적용하는 거였다. 프레임을 만들고(375x812 사이즈로 하면 편했다) 컴포넌트를 하나씩 얹은 다음, 바깥 프레임이랑의 관계만 보는 식. 스테이터스 바는 위+양옆, 로고는 왼쪽+상단, 닫기 버튼은 오른쪽 상단, 홈 인디케이터는 중앙, 이미지는 스케일. 양옆이나 위아래 동시 고정은 패널에서 클릭만으론 안 되고, 드롭다운을 눌러 'Left and Right'나 'Top and Bottom'을 골라야 했다.

오토레이아웃에 정이 너무 들었던 건지, 이 실습에서 자꾸 컴포넌트를 오토레이아웃으로 묶는 사람들이 많았다(나 포함…). 오늘은 오토레이아웃이 아니라 프레임에 그냥 얹어보는 날인데. 강사님 말처럼 "어제에서 살짝만 헤어 나와야" 하는 시간이었다.

3. 반응형 vs 적응형 — 개념이 더 중요한 파트

이 파트는 실습보다 개념 이해가 중요하다고 했다. 그래서 손을 멈추고 머리로 따라갔다.

반응형(Responsive) 은 해상도에 맞는 적절한 사이즈의 화면을 보여주는 방식이다. 하나의 디자인·코드로 다양한 기기에 대응하고, 화면 너비에 따라 레이아웃이 자동으로 바뀐다. 그래서 유동적 레이아웃이라고도 부른다. 강사님은 사이즈 조절이 되는 '프리사이즈 옷'에 비유했다. 장점은 모든 기기를 하나로 대응하고 코드 관리가 쉽다는 거, 단점은 기기별로 완벽히 통제하기 어렵고 시간과 전문 지식이 더 든다는 거였다. 핀터레스트가 대표적 예시다.

적응형(Adaptive) 은 각 해상도에 맞춘 화면을 따로따로 제작하는 방식이다. '맞춤 제작 옷'에 가깝다. 주소창에 m이 붙는 m.naver.com이 대표적인데, m을 지우면 PC 화면으로 바뀐다. 기기별로 최적화된 경험을 주고 기획·디자인이 비교적 편하지만, 화면을 따로 관리해야 해서 유지보수가 번거롭다.

여기서 핵심 개념이 브레이크 포인트(Breakpoint) 였다. 화면 너비에 따라 레이아웃이 딱 바뀌는 특정 지점, 그러니까 전환되는 경계선이다. 이 지점에서 컬럼 수나 레이아웃 구조가 달라진다.

일반적으로 많이 쓰는 기준:

• 모바일: 320 ~ 767px
• 태블릿: 768 ~ 1023px
• 데스크톱: 1024px ~

근데 이걸 내 맘대로 정하는 게 아니라, 스탯카운터(StatCounter) 같은 통계 사이트에서 타깃 사용자가 어떤 해상도를 많이 쓰는지 확인하고 정해야 한다는 게 인상적이었다. 한국 서비스면 한국 기준 데이터를 봐야 정확하다. 시니어 대상이면 정사각형에 가까운 모니터를 많이 쓴다는 리서치도 반영할 수 있다. 의사결정엔 항상 근거가 필요하다는 말이 또 나왔다. 이건 간호할 때 차팅하던 감각이랑 비슷하다. 내 느낌이 아니라 데이터로 말해야 한다는 것.

실제 사례로 애플, 29cm, 와디즈, 토스 사이트를 줄였다 늘렸다 하면서 브레이크 포인트가 딱딱 걸리는 지점을 눈으로 봤다. 어떤 곳은 두 번만 분기하고(태블릿·모바일을 같게), 어떤 곳은 세 번 분기했다. 개발자 도구(맥은 옵션+커맨드+I, 윈도우는 F12)를 열어 디바이스별로 보면 브레이크 포인트를 더 정확히 확인할 수 있었다.

마지막으로 디자이너-개발자 협업 프로세스를 5단계로 정리했다. As-Is/To-Be 기획 → 경쟁사·레퍼런스 수집 → IA 설계 → 분기점(브레이크 포인트) 협의 + 화면 설계 → QA(크롬·사파리 등 브라우저 테스트). 여기서 As-Is는 기존 것, To-Be는 개선한 것이라는 용어를 외워두라고 했다. 분기점은 보통 초반 UX 리서치 단계에서 협의한다는 것도.

4. 반응형 디자인 실습 — 순서가 생명이었다

오늘의 마지막은 배운 걸 실제로 적용하는 반응형 실습이었다. 컨스트레인츠는 안 쓰고 오토레이아웃만으로 만드는 게 조건이었다.

작업 전에 완성 예제부터 뜯어봤다. 화면을 줄였다 늘렸다 하면서 어디서 멈추는지 보면 민·맥스 값이 걸려 있는 걸 알 수 있고, 칸마다 줄어드는 한계가 다른 걸 보면 미니멈 값이 각각 다르게 들어간 걸 알 수 있었다. 정답 화면의 설정을 하나씩 눌러보는 게, 느리지만 가장 오래 기억에 남는 방법이라고 했다. (그리고 작업은 프레임 말고 섹션(Shift+S) 으로 하라고 권했다. 프레임 기반으로 하면 헷갈리기 때문.)

실습은 내가 가장 많이 헤맨 파트였다. 화면을 잘못 가져와서 한 번 삭제하고 다시 가져오기도 했고, 커서가 갑자기 이상하게 움직이기도 했다. 강사님이 옆에 와서 잡아준 순서가 핵심이었다. 정리하면 이렇다.

1. 이미지(하단 프레임들)만 가져온다. 타이틀이 거슬리면 잠깐 위로 빼둔다.
2. 전체 선택 후 Shift+A로 오토레이아웃. 처음엔 자동으로 그리드가 잡힌다.
3. 그리드를 가로(Horizontal) 정렬로 바꾸고 랩(Wrap) 을 켠다.
4. 여기가 포인트. 민값 넣기 전에, 엔터로 자식 요소들을 선택해서 상하값을 픽스드(Fixed) 로 먼저 고정한다. 이 순서를 건너뛰면 나중에 다 꼬인다.
5. 각 요소에 가로 미니멈 값을 지정한다(356, 478, 254처럼 칸마다 다르게).
6. 전체를 다시 필 컨테이너(Fill) 로 지정한다. (민값에 도달했다가 그 이하로 줄면 필값으로 튀어오르는 게 정상이다.)
7. 타이틀이랑 묶어서 오토레이아웃, 갭 40, 패딩 40/80, 배경 흰색.
8. 바깥 프레임에 민·맥스 값(예: 560 ~ 1920)을 넣는다. 화면을 줄이고 늘리면 빨간 선으로 한계가 표시된다.

이 순서대로 하니 줄였을 때 랩으로 내려가고, 상하는 허그로 잘 따라오는 반응형이 완성됐다. 다 만들고 나서는 응용으로 당근 화면도 해봤다.

오늘의 회고

손은 바빴고 머리는 자주 멈췄다. 오토레이아웃이 어제보다 조금은 친해진 것 같다가도, 컨스트레인츠로 넘어가니 또 오토레이아웃으로 묶고 있는 나를 발견했다. 그래도 "콘텐츠 흐름은 오토레이아웃, 위치는 컨스트레인츠"라는 한 줄 정리는 확실히 남았다. 반응형 실습에서 배운 것도 결국 순서였다. 상하값 고정 → 민값 → 필 이 순서. 툴은 손으로 반복해야 늘고, 가장 느린 방법이 가장 오래 남는다는 말을 오늘 몸으로 이해했다.

---

오늘의 피그마 단축키 정리

단축키기능

F	프레임 만들기
Shift + S	섹션 만들기
Shift + A	선택한 요소들을 오토레이아웃으로 묶기
Ctrl + D (Cmd + D)	간격을 유지하며 복제
Enter	프레임 안으로 들어가 자식 요소 선택
Cmd + Backspace / Delete	오토레이아웃·프레임 깨기
Alt (Option) + 드래그	복사하면서 끌어오기
Option + Cmd + I (Mac)	개발자 도구 열기
F12 (Windows)	개발자 도구 열기