오즈코딩스쿨 새싹반 - 잘 만든 화면을 뜯어보는 눈 — 시선의 흐름과 레이아웃 떠내기 (3강)

새싹반은 디자인 캠프와는 결이 꽤 다른 수업이다. 캠프가 피그마의 기능을 하나씩 익히는 쪽이라면, 새싹반은 그 도구를 '디자이너답게' 다루는 법에 가깝다. 어떤 버튼을 누르느냐보다, 이 화면이 왜 이렇게 배치됐는지를 읽어내고 그걸 내 것으로 가져오는 쪽. 강사님도 기술과 개념을 일부러 섞어서 보여주고 싶었다고 했다.

피그마를 잘 다루는 것도 중요하지만, 디자이너답게 다루는 법이 필요해요.

오늘의 큰 줄기는 세 가지였다. 눈이 화면 위를 어떻게 움직이는지, 잘 만든 화면을 어떻게 '뜯어내'서 다시 짓는지, 그리고 그걸 격자 위에서 어떻게 정교하게 맞추는지.

눈은 아무렇게나 움직이지 않는다

먼저 다룬 건 시선의 흐름이었다. 우리가 무언가를 바라볼 때 눈은 제멋대로 헤매는 게 아니라 일정한 흐름을 따라 움직인다. 기본적으로는 왼쪽에서 오른쪽으로, 위에서 아래로. 그런데 실제로는 제목을 보고, 이미지를 보고, 다시 제목으로 돌아오고, 본문을 읽고, 리스트를 훑고, 또 제목으로… 이렇게 튕기듯 오간다. 이 흐름을 스스로 잘 느낄수록 작업물을 보는 이해도가 높아진다고 했다.

그래서 연습으로, 레퍼런스 위에 내 눈이 움직이는 순서대로 점과 선을 직접 찍어봤다. 잘 만든 화면일수록 시선의 이동이 다채롭다. 왼쪽으로 갔다 오른쪽으로 갔다 위아래로 오가며 지루하지 않게 흐른다. 반대로 단순하게만 배치하면 금세 지루해진다.

여기서 중요한 전제 하나. 화면은 타이포그래피와 이미지의 결합으로 메시지를 만든다. 타이포그래피는 정보를 전한다. 이 제품이 얼마나 좋은지, 얼마나 믿을 만한지 같은 것들. 이미지는 맥락과 분위기, 뉘앙스를 전한다. 이 둘을 합친 게 메시지이고, 어떻게 배치하느냐에 따라 같은 재료라도 느낌이 완전히 달라진다.

이 대목에서 간호하던 때가 떠올랐다. 환자를 살필 때도 눈을 아무 데나 두지 않도록 배운다. 기도-호흡-순환이든 머리부터 발끝이든, 정해진 순서로 훑어야 놓치는 게 없다. 시선이 따라야 할 길이 정해져 있는 것이다. 디자이너는 보는 사람의 눈에 그 길을 깔아주는 사람이었다. 화면의 시선 흐름을 읽는 일이, 임상에서 몸에 익혔던 그 훑는 눈과 자리만 바뀐 같은 일처럼 느껴졌다.

무엇을 먼저 보게 할 것인가

흐름과 짝이 되는 개념이 위계다. 글에는 제목, 본문, 캡션 같은 층위가 있는데, 화면에서도 똑같다. 가장 큰 제목이 먼저 눈에 들어오고, 그다음 본문, 그다음 보조 정보 순으로 읽히게 만든다. 이 위계는 글자 크기와 굵기, 줄 간격으로 잡는다. 제목은 크게, 본문은 작게. 강사님은 제목 36, 본문 16~18 정도를 예로 들면서, 미디엄과 레귤러 같은 굵기로도 위계를 만들 수 있다고 했다.

주차 서비스 히어로 섹션을 예로 보면, "똑똑한 주차 관리 파트너"가 가장 큰 제목이고, "신규 문의 신청"은 클릭을 유도하는 버튼이었다. 이미지로 똑부러진 업무 현장을 먼저 보여주고, 제목으로 메시지를 전하고, 강조된 버튼으로 행동을 유도한다. 정보와 뉘앙스를 한 화면에서 한꺼번에 전하고 있는 셈이다.

잘 만든 화면을 떠내는 법

오늘의 핵심은 레퍼런스를 떠내는 방법이었다. 그 전에, 레퍼런스는 어디서 가져오는 게 좋을까. 강사님은 포트폴리오 사이트보다 실제로 런칭된 서비스에서 찾으라고 했다. 실제 서비스가 현실성도 높고 배울 게 더 많기 때문이다. 국내 웹 디자인은 GDWeb의 'GD 선정작'이 잘 모여 있는데, 다만 등록 당시와 지금의 화면이 다를 수 있다는 건 감안해야 한다. (요즘은 다들 모바일만 해서, 일부러 웹을 먼저 다룬다고도 했다.)

레이아웃이라고 하면 거창하게 느껴지지만, 그냥 배치도라고 생각하면 된다. 어떤 요소가 어디에 놓여 있는지를 보는 것이다. 방법은 의외로 단순했다. 레퍼런스를 그대로 복사한 다음, 텍스트의 오퍼시티를 30% 정도로 낮춘다. 그러면 글자들이 회색 덩어리로 바뀌어, 내용은 사라지고 배치만 남는다. 거기에 강조된 요소 위에 색 블록을 하나 얹으면, 이 화면의 뼈대가 그대로 드러난다. 이렇게 떠낸 형태가 하나하나 쌓이면 '나만의 문법'이 된다. 디자인을 잘하는 사람들은 이런 골격을 머릿속에 가지고 있다가 꺼내 쓰는 거였다.

떠낸 골격은 내용만 바꿔 끼우면 곧바로 다른 화면이 된다. 강사님은 주차 서비스의 골격을 그대로 두고 내용만 공연 서비스로 바꿔봤다. "차세대 주차"를 "차세대 공연"으로, "똑똑한 주차 관리 파트너"를 "화려한 공연 파트너"로, 문구를 갈아 끼우고 이미지도 바꿨다. 다만 이미지는 바뀐 메시지에 맞아야 한다. 안 맞으면 어색해지고, 그럴 땐 크기나 문구 길이를 조정해줘야 했다.

예를 많이 아는 게 디자이너의 역량이에요.

기술을 많이 아는 것보다, 좋은 예시를 많이 뜯어보고 떠내본 사람이 빨리 는다는 말이 오래 남았다. 한번 떠내두면 언제든 꺼내 만들어 쓸 수 있으니까, 분석하는 그 행위 자체가 실력이 되는 것이다.

격자 위에서 짓는다

회색 블록으로 대충 떠내는 것보다 더 정교한 방법이 그리드였다. 랜딩 페이지 한 장은 결국 여러 섹션이 위아래로 쌓인 것이고, 각 섹션은 하나의 내용 덩어리다. 그 덩어리를 격자 위에서 다시 떠내면 훨씬 정교해진다.

디자이너들은 레이아웃을 짤 때 격자를 깐다. 웹에서는 12칼럼 그리드가 거의 기본이다. 바깥의 여백인 마진은 격자에 포함되지 않는 영역이고, 실제로 중요한 건 칼럼이다. 칼럼 사이 간격인 거터는 그렇게까지 신경 쓰지 않아도 된다고 했다. 레퍼런스를 분석할 때는 이 격자를 위에 깔고(Shift+G로 켜고 끌 수 있다), 요소들이 어느 칼럼에 맞춰 배치됐는지를 본다. 규칙에서 살짝 어긋나는 건 무시하고 큰 규칙만 본다. 몇 칼럼을 차지하는지로 크기를 가늠하는 식이다. 외부 자료를 볼 때 어떤 그리드가 쓰였는지부터 분석하는 습관이, 결국 작업의 디테일을 끌어올린다.

실제 크기로 봐야 보인다

오늘 가장 새겨둘 만한 건 따로 있었다. 항상 실제 디바이스 크기에서 확인하라는 것.

그래픽 디자인에서 가장 흔한 실수가, 화면을 확대해서 작업하다가 축소했을 때 스케일이 어긋나는 거라고 했다. 그래서 피그마의 프레젠트 모드를 'Actual size'로 두고 실제 크기로 봐야 한다. 본인이 쓰는 모니터 크기도 중요해서, 강사님은 4K 모니터(3840×2160)를 200% 배율로 써서 실제로는 1920×1080 크기로 화면을 본다고 했다. 모바일이라면 자기 휴대폰의 해상도에 맞추고, 피그마 앱을 받아 실제 기기에 띄워가며 작업하는 게 맞다.

재미있는 건, 축소해서 보면 작아 보이던 텍스트가 실제 크기에서는 충분히 읽힌다는 점이었다. 일종의 착시인 셈이다. 그래서 처음부터 실물 크기로 테스트하며 만들어야 디테일이 산다.

실물 디바이스 크기에 맞춰서 작업하세요.

고정하고 싶은 건 자유배치로

마지막엔 조금 어려운 기술을 맛봤다. 오토 레이아웃 안에서 특정 요소만 자유롭게 두는 **자유배치(absolute position)**다. 예를 들어 텍스트가 길어지면 레이아웃이 늘어나는데, 그 안에서 장식 선 하나는 늘 같은 자리에 고정하고 싶을 때가 있다. 그럴 때 그 요소를 자유배치로 빼두고, 콘스트레인츠를 Top & Bottom 같은 식으로 잡아주면, 크기가 변해도 원하는 위치를 유지한다. 이렇게 하면 레이아웃이 유연하게 변형 가능한 형태가 되고, 결국 컴포넌트로 발전하게 된다.

다만 이 부분은 시간이 모자라 끝까지 못 갔다. 손이 자꾸 미끄러져 나도, 다른 사람들도 헤맸고, 강사님이 다음 시간에 복습으로 다시 봐주기로 했다. 그때 확실히 잡아야겠다.

단축키와 꿀팁 정리

오늘 나온 단축키와 작업 팁을 모아둔다.

단축키 · 기능설명

Ctrl(Cmd) + Alt + C / V	텍스트 스타일(속성)을 복사 → 다른 텍스트에 붙여넣기
Ctrl(Cmd) + 드래그	이미지 크롭(잘라내기)
Shift+A	오토 레이아웃으로 묶기
Shift+G	그리드 보기 켜고 끄기
화살표 키 / Shift+화살표	요소를 정밀하게 이동 (마우스 대신)
Present + Actual size	실제 디바이스 크기로 확인
Absolute position(자유배치) + 콘스트레인츠	오토 레이아웃 안에서 위치 고정

그밖에 기억해둘 것들. 한 요소를 정확히 가운데로 두고 싶으면, 같은 걸 두 개 놓고 가운데 정렬한 뒤 하나만 쓰면 깔끔하게 맞는다. 텍스트 아이디어가 막히면 피그마 AI의 'Rewrite this'(유료 기능)나 GPT를 쓰고, 이미지는 Unsplash에서 가져오면 된다. 흰 텍스트가 배경에 묻혀 안 보일 땐 뒤에 그림자를 한 겹 깔아주면 살아난다.

정리하며

오늘 수업은 도구가 아니라 '보는 눈'에 관한 거였다. 가장 쓸모 있었던 건 피그마의 어떤 기능이 아니라, 잘 만든 화면을 회색 뼈대로 줄여서 왜 이렇게 배치됐는지를 읽고 다시 짓는 방식이었다. 실력이 빨리 느는 비결은 새로운 기능을 더 외우는 게 아니라, 좋은 예시를 많이 뜯어보는 데 있다는 말이 계속 맴돌았다.

그리고 실제 크기로 확인하라는 당부도 오래 남았다. 화면 안에서만 그럴듯해 보이는 것과, 실제 손에 쥐는 기기에서 보이는 건 다르니까. 작아 보인다고 키우다 보면 정작 실물에서는 과해지는, 그 착시를 조심하라는 이야기였다.

레퍼런스를 그냥 예쁘다고 저장만 하던 습관을, 이제는 한 번씩 떠내서 다시 지어보는 쪽으로 바꿔봐야겠다. 그리고 작업은 처음부터 실제 디바이스 크기에서 시작하는 습관을 들이고, 오늘 못 끝낸 자유배치는 다음 시간에 확실히 잡을 생각이다. 다음 강의는 이미지 편이라, 강조 표현을 본격적으로 다룬다고 한다. 배치를 배웠으니 이제 세부를 다듬는 차례다.