배치(가로줄과 격자)

무엇을 어디에 놓을지 정하는 일이에요. 나란히 세우는 방식과 칸으로 나누는 방식 두 가지가 있고, 둘 다 정하지 않으면 모든 것이 위에서 아래로 한 줄씩 쌓여요.

사진과 설명을 나란히 놓고 싶었는데 사진 아래에 설명이 붙어 버렸어요. 가격표 세 개가 옆으로 놓이길 바랐는데 위아래로 길게 늘어섰어요. 폰으로 열어 보니 화면이 좌우로 밀려서 전화번호가 잘렸어요.

이 세 가지는 전부 같은 자리에서 나오는 증상이에요. 배치를 정하지 않았거나, 정한 방식이 화면 크기와 안 맞는 것이에요. 색이나 글씨 문제가 아니라서, "예쁘게 해주세요"라고 말해도 잘 안 고쳐져요.

가게에 물건 상자를 들여놓고 아무 말도 안 하면 직원은 그냥 쌓아요. 바닥에서 위로 한 개씩요. 나란히 진열되게 하려면 "이 선반은 가로로 다섯 개 세워주세요"라고 정해 줘야 해요. 화면도 똑같아요. 배치를 정하지 않은 요소는 무조건 위에서 아래로 쌓이는 게 기본값이에요. 세로로 쌓인 건 고장이 아니라 아직 아무 지시도 안 받은 상태예요.

증상으로 찾는 표

사장님이 배치를 직접 고칠 일은 없어요. 화면을 보고 눈에 걸리는 것을 그대로 말하면 돼요. 어려운 단어를 외울 필요는 없고, 어디가 어떻게 이상한지만 짚어 주면 충분해요.

보이는 증상	실제 원인	이렇게 말하세요
사진과 글이 위아래로 쌓여요	나란히 놓으라는 지시가 없어요	"사진과 설명을 한 줄에 나란히 놓아주세요. 폰에서는 위아래로 쌓아주세요"
폰에서 화면이 옆으로 밀려요	화면보다 넓은 요소가 하나 있어요	"폰에서 가로 스크롤이 생겨요. 화면 폭에 맞게 고쳐주세요"
가운데로 안 와요	가로 가운데와 세로 가운데는 다른 지시예요	"이 부분을 가로 가운데, 세로 가운데 모두 맞춰주세요"
카드 높이가 들쭉날쭉해요	글 길이에 따라 각자 늘어난 거예요	"카드 높이를 서로 같게 맞춰주세요"
간격이 제각각이에요	요소마다 여백을 따로 받았어요	"카드 사이 간격을 전부 같은 값으로 통일해주세요"
한 줄에 너무 많이 들어가 찌그러져요	칸 수가 화면 크기와 무관하게 고정돼 있어요	"카드를 컴퓨터에서 3칸, 태블릿 2칸, 폰 1칸으로 나눠주세요"
폰에서 사진이 아래로 내려가요	쌓이는 순서가 컴퓨터 기준이에요	"폰에서는 사진을 설명보다 위에 보여주세요"
글씨가 상자 밖으로 튀어나와요	내용이 칸보다 커요	"글씨가 상자를 넘쳐요. 상자 안에 들어가게 해주세요"
표가 화면을 뚫고 나가요	표는 줄일 수 없는 폭을 가져요	"이 표만 좌우로 넘겨 볼 수 있게 해주세요"

어느 부분인지 꼭 짚어 주세요

"배치가 이상해요"만으로는 어디를 고칠지 알 수 없어요. "가격표 세 칸", "맨 위 메뉴줄", "후기 카드들"처럼 화면에서 그 부분을 부르는 이름을 붙여 말하면 정확히 그 자리만 고쳐요.

방식은 두 가지뿐이에요

배치 방식은 딱 두 종류로 갈려요. 하나는 줄 세우기, 하나는 칸 나누기예요. 이름을 외울 필요는 없지만, 둘이 다르다는 것만 알면 원하는 그림을 훨씬 정확히 말할 수 있어요.

줄 세우기

[로고] [메뉴] [메뉴] [전화 버튼] 한 줄, 개수는 그때그때

한 방향으로만 늘어놓아요. 개수가 늘거나 줄어도 알아서 자리를 나눠 가져요. 맨 위 메뉴줄, 버튼 두 개, 아이콘과 글씨 짝처럼 짧은 나열에 써요.

칸 나누기

[사진][사진][사진] [사진][사진][사진] 칸을 먼저 정하고 채움

가로와 세로를 동시에 정해요. 같은 크기 칸이 여러 줄로 반복될 때 써요. 메뉴 사진 목록, 가격표 세 칸, 후기 카드 아홉 개처럼요.

이런 걸 만들 때	고르는 방식	가게로 치면
맨 위 상호와 메뉴줄	줄 세우기	카운터에 일렬로 놓은 안내판
버튼 두 개를 붙여 놓기	줄 세우기	계산대 옆 두 장짜리 안내 카드
메뉴 사진 열두 장	칸 나누기	칸칸이 나뉜 진열장
가격표 세 칸	칸 나누기	벽에 걸린 세 칸 요금판
사진 왼쪽, 설명 오른쪽	줄 세우기	액자와 설명 명패를 나란히
사진 갤러리	칸 나누기	우편함처럼 격자로 짠 액자벽

구분이 헷갈리면 기준은 하나예요. 줄이 하나면 줄 세우기, 줄이 여러 개로 반복되면 칸 나누기예요. 이 문서에서 말하는 배치는 꾸미는 규칙의 한 부분이고, 화면 크기별로 배치를 다시 짜는 이야기는 반응형에 이어져요.

겹쳐 놓기와 붙여 두기

줄 세우기와 칸 나누기는 요소들이 서로 자리를 비켜 주는 배치예요. 그런데 가끔은 비켜 주지 않고 겹쳐야 할 때가 있어요. 사진 위에 상호를 얹거나, 화면을 아무리 내려도 전화 버튼이 아래에 붙어 있게 하는 것처럼요.

진열대에 물건을 놓는 것과 유리창에 스티커를 붙이는 것은 다른 일이에요. 진열대 물건은 서로 자리를 나눠 갖지만, 창문 스티커는 뒤에 무엇이 있든 그 자리에 그냥 붙어 있죠. 겹쳐 놓기가 스티커예요. 다른 요소의 자리 계산에 끼지 않고 위에 올라앉아요.

원하는 것	이렇게 말하세요	주의할 점
사진 위에 상호 글씨 얹기	"사진 위에 상호를 겹쳐서 가운데에 넣어주세요"	밝은 사진에 흰 글씨는 안 읽혀요. 어두운 막을 한 겹 깔아 달라고 하세요
전화 버튼을 화면 아래에 고정	"폰에서 전화 버튼이 화면 맨 아래에 항상 붙어 있게 해주세요"	고정 버튼이 맨 아래 내용을 가려요. 아래쪽 여백을 더 달라고 하세요
맨 위 메뉴줄을 따라오게	"스크롤을 내려도 맨 위 메뉴줄이 따라오게 해주세요"	폰에서는 화면을 많이 잡아먹어요. 폰에서는 얇게 줄여 달라고 하세요
사진 한쪽에 할인 딱지	"사진 왼쪽 위에 할인 딱지를 겹쳐서 붙여주세요"	딱지가 사진 밖으로 삐져나오면 잘려요. 안쪽으로 붙여 달라고 하세요

겹치기는 아껴 쓰세요

겹쳐 놓은 요소는 다른 요소의 자리 계산에서 빠지기 때문에, 많아지면 어느 것이 무엇을 가리는지 예측하기 어려워져요. 폰에서 글씨가 사라졌다는 신고의 상당수가 이것이에요. 꼭 겹쳐야 하는 것만 겹치고, 나머지는 줄과 칸으로 푸는 게 안전해요.

화면은 큰 덩어리부터 짜요

배치를 잘게 고치다 지치는 이유는 순서를 거꾸로 갔기 때문이에요. 버튼 위치부터 만지면 나중에 큰 덩어리가 바뀔 때 그 손질이 전부 날아가요. 가게 인테리어도 진열대 위치를 먼저 정하고 그다음에 소품을 놓죠.

1위에서 아래로 덩어리를 셉니다. 맨 위 띠, 첫 화면, 소개, 메뉴 목록, 후기, 맨 아래 연락처처럼요. 대개 다섯에서 일곱 덩어리면 끝나요.
2덩어리 순서를 정합니다. 손님이 가장 먼저 알아야 할 것이 위로 와요. 동네 가게라면 무엇을 파는지, 어디인지, 몇 시까지 하는지가 앞줄이에요.
3덩어리마다 방식을 고릅니다. 안에 같은 카드가 여럿이면 칸 나누기, 서로 다른 것 몇 개가 나란히면 줄 세우기예요.
4폭과 여백을 통일합니다. "모든 덩어리의 좌우 여백을 같게 맞춰주세요" 한마디로 화면이 훨씬 정돈돼 보여요. 줄이 안 맞는 화면은 그래서 어수선해 보여요.
5그다음에 안쪽을 다듬습니다. 버튼 크기, 글씨 굵기, 사진 비율은 마지막이에요. 큰 틀이 확정된 뒤에 손대면 다시 만질 일이 없어요.

폰에서 가로로 밀리는 문제

배치 문제 중에 손님을 가장 많이 잃는 게 이거예요. 컴퓨터에서는 멀쩡한데 폰에서만 좌우로 밀려요. 사장님은 컴퓨터로 만들기 때문에 본인만 못 보는 고장이 돼요.

1폭이 숫자로 못 박힌 요소를 찾아요. 폭을 900으로 고정해 두면 폰 화면이 400일 때 500만큼 삐져나와요. 화면보다 넓은 요소가 하나만 있어도 화면 전체가 밀려요.
2줄지 않는 사진을 찾아요. 큰 사진이 원래 크기를 고집하면 그대로 밀어내요. "사진은 화면 폭을 넘지 않게 해주세요"로 해결돼요.
3표와 코드 상자를 찾아요. 이 둘은 줄이면 못 읽히니까 안 줄어드는 게 정상이에요. 화면을 줄이는 대신 그 표만 따로 옆으로 넘겨 보게 만들어요.
4긴 영문 주소나 이메일을 찾아요. 띄어쓰기가 없는 긴 글자 덩어리는 줄바꿈할 자리가 없어서 한 줄로 뻗어요. "긴 주소는 중간에서 줄바꿈되게 해주세요"라고 말해요.
5칸 수가 그대로인지 봐요. 컴퓨터에서 네 칸이던 격자가 폰에서도 네 칸이면 칸마다 손톱만 해져요. 칸 수를 화면 크기별로 나눠 달라고 해요.

확인은 30초면 돼요

브라우저 창의 오른쪽 끝을 잡고 명함 폭만큼 좁혀 보세요. 그 상태에서 아래쪽에 좌우 스크롤바가 생기면 폰에서도 밀려요. 더 확실한 건 만든 주소를 본인 폰으로 보내 열어 보는 거예요.

사장님이 실제로 겪는 장면

장면 1 · 외주 개발자가 말했다

“맨 윗줄은 플렉스로 잡고, 메뉴 카드 목록만 그리드로 갈게요.”

이제 해석돼요. 윗줄은 줄 세우기, 카드 목록은 칸 나누기로 하겠다는 뜻이에요. 어려운 결정을 하는 게 아니라 두 방식 중 어디에 무엇을 쓸지 정한 것이고, 사장님이 보기에 맞으면 그대로 두면 돼요.

장면 2 · 손님이 알려 줬다

“사장님, 폰으로 보면 화면이 옆으로 밀려서 전화번호가 잘려요.”

컴퓨터에서는 절대 안 보이는 고장이에요. 원인은 대개 화면보다 넓은 요소 하나예요. 큰 사진이거나 긴 표죠. 증상 그대로 "폰에서 가로 스크롤이 생겨요. 화면 폭에 맞게 고쳐주세요"라고 말하면 그 하나를 찾아 줄여요.

장면 3 · 고쳤더니 다른 데가 틀어졌다

“가격표를 세 칸으로 바꿔 달랬더니 위쪽 메뉴줄까지 흐트러졌어요.”

배치는 바깥 상자가 안쪽을 품는 구조라서, 큰 상자를 건드리면 안쪽이 따라 움직여요. 이럴 때는 되돌린 다음 범위를 좁혀 말해요. "가격표 부분만 세 칸으로 바꿔주세요. 위쪽 메뉴줄은 그대로 두세요"처럼요. 되돌리는 법은 되돌리기에 있어요.

말하는 순서

배치는 한 번에 여러 개를 시키면 엉뚱한 곳까지 움직여요. 순서를 지키면 훨씬 적게 헤매요.

1어디인지 먼저 부릅니다. "가격표 세 칸", "후기 카드들"처럼 그 부분에 이름을 붙여요.
2원하는 그림을 말합니다. "한 줄에 나란히", "세 칸씩 두 줄로"처럼 결과를 말해요. 방법을 지정하지 않아도 돼요.
3폰에서는 어떻게 할지 같이 말합니다. 이걸 빼면 컴퓨터 기준으로만 맞춰져요. "폰에서는 한 칸씩 위아래로"를 붙여요.
4바로 확인합니다. 창을 좁혀 보고, 폰으로도 열어 봐요. 확인하지 않고 다음 요청으로 넘어가면 어느 요청이 틀어뜨렸는지 알기 어려워요.
5마음에 안 들면 되돌리고 다시 말합니다. 위에 덧칠하듯 요청을 얹는 것보다, 되돌린 뒤 한 번 더 정확히 말하는 게 빨라요.

방법을 지정하지 마세요

"플렉스로 해주세요" 같은 방법 지정은 오히려 결과를 나쁘게 만들 수 있어요. 사장님이 원하는 건 방법이 아니라 눈에 보이는 결과니까요. "세 칸씩 두 줄로, 폰에서는 한 칸씩"처럼 결과만 말하면 그에 맞는 방법이 알아서 골라져요. 말로 시키는 요령은 프롬프트에 더 있어요.

자주 묻는 것

Q. 제가 코드를 열어서 배치를 고쳐야 하나요?: 아니에요. 말로 시키는 게 기본이에요. 미세하게 위치를 옮기고 싶을 때는 캔버스 편집에서 직접 끌어서 옮길 수도 있어요.
Q. 배치를 바꾸면 글이나 사진도 바뀌나요?: 내용은 그대로예요. 놓이는 자리만 달라져요. 그래서 배치 요청은 되돌리기가 비교적 안전한 편이에요.
Q. 가운데로 옮겨 달랬는데 안 움직여요.: 가운데가 두 종류라서 그래요. 좌우 가운데와 위아래 가운데는 다른 지시예요. "가로 가운데, 세로 가운데 모두"라고 붙여 말하면 대개 해결돼요. 또 무엇을 기준으로 가운데인지도 말해 주세요. 화면 기준인지, 그 상자 안에서인지요.
Q. 칸을 몇 개로 나누는 게 좋아요?: 폰은 1칸, 태블릿은 2칸, 컴퓨터는 3칸이 무난해요. 사진이 주인공이면 컴퓨터에서 4칸까지 가도 괜찮고, 글이 많은 카드라면 컴퓨터에서도 2칸이 읽기 편해요.
Q. 칸 안에 사진 크기가 서로 달라서 들쭉날쭉해요.: 칸은 같은데 사진의 원래 비율이 달라서 그래요. "카드 사진을 모두 같은 비율로 잘라서 보여주세요"라고 말하면 칸이 가지런해져요. 잘리는 게 아깝다면 정사각형보다 가로로 긴 비율이 무난해요.
Q. 빈 자리가 너무 많아 보여요. 꽉 채우는 게 좋나요?: 빈 자리는 낭비가 아니라 읽는 길이에요. 백화점 매대가 빽빽하면 아무것도 안 보이는 것과 같아요. 다만 컴퓨터 화면에서 좌우가 지나치게 비면 허전하니, 그때는 "내용 폭을 조금 넓혀주세요"로 조절하면 돼요.
Q. 폰 화면은 어떻게 미리 봐요?: 브라우저 창을 좁히는 게 가장 빠르고, 진짜 판정은 본인 폰으로 링크를 열어 보는 거예요. 손가락으로 눌러 보면 버튼이 작은지도 같이 알게 돼요.
Q. 간격만 넓히고 싶은데 배치까지 흔들려요.: 간격은 요소마다 따로 주면 어긋나기 쉬워요. "카드 사이 간격을 한 값으로 통일해주세요"처럼 그 카드 전체에 한 번 주는 방식으로 말해 보세요.

확인해 보세요

메뉴 사진 열두 장을 한 줄에 세 장씩 네 줄로 보여주고 싶어요. 어느 방식일까요?

하나 더

폰에서 화면이 옆으로 밀려요. 뭐라고 말하는 게 가장 정확할까요?

직접 해보기

만든 화면을 명함 폭까지 좁혀 보세요

스튜디오에서 미리보기를 띄우고 창을 좁혀 보세요. 아래쪽에 좌우 스크롤바가 생기면 위 표에서 그 증상을 찾아 문장 하나를 그대로 말해 보세요. 배치는 되돌리기가 안전한 편이라 마음 편히 시험해도 돼요.

스튜디오 열기

더 깊이 (안 읽어도 괜찮아요)

왜 기본이 세로 쌓기인가 · 웹은 처음에 논문과 문서를 읽는 도구로 태어났어요. 문서는 문단이 위에서 아래로 흐르는 게 당연하죠. 그래서 브라우저의 기본값이 지금도 "한 줄 쓰고 다음 줄"이에요. 나란히 놓기와 격자로 나누기는 나중에 얹은 지시라서, 아무 말도 안 하면 원래 성질대로 쌓여요. 세로로 쌓인 화면을 보면 누군가 실수한 게 아니라 아직 아무도 말하지 않은 것으로 읽으면 정확해요.

바깥 상자가 안쪽을 지배해요 · 배치 지시는 요소 자기 자신에게 붙는 게 아니라 그 요소들을 담고 있는 바깥 상자에 붙어요. "이 선반은 가로 진열"이라고 선반에 말하면 그 안의 물건들이 따라오는 것과 같아요. 그래서 카드 하나를 옮기려다 형제 카드들이 같이 움직이는 일이 생기고, 반대로 카드 하나에만 말했는데 아무 변화가 없는 일도 생겨요. 배치가 어긋나면 그 요소보다 한 겹 바깥을 의심하는 게 맞아요. 간격도 같은 원리예요. 카드마다 여백을 붙이면 맨 끝에만 여백이 남거나 두 카드 사이에서 두 겹으로 겹치는데, 바깥 상자가 "내 안의 것들 사이는 이만큼"이라고 한 번 정하면 사이에만 정확히 들어가요. 그래서 "카드마다 여백을 넣어주세요"보다 "카드 사이 간격을 통일해주세요"가 훨씬 깔끔한 결과를 내요.

칸 수를 화면별로 바꾸는 것이 반응형의 절반 · 폰 대응이라고 하면 글씨 크기부터 떠올리기 쉽지만, 실제로 체감을 가장 크게 바꾸는 건 칸 수예요. 컴퓨터 네 칸을 폰에서 한 칸으로 접는 것 하나로 대부분의 찌그러짐이 사라져요. 폭을 숫자로 못 박지 않고 비율과 최소 폭으로 말하는 것도 같은 이야기예요. "이 카드는 최소 이만큼은 되고, 자리가 부족하면 다음 줄로 넘어가게"라고 정해 두면 화면 크기를 하나하나 지정하지 않아도 알아서 접혀요. 세상의 화면 크기는 계속 새로 나오는데, 접히는 규칙으로 정해 두면 앞으로 나올 기기까지 미리 대비되는 셈이에요.

이것만 기억하세요

·세로로 쌓인 건 고장이 아니라 배치를 아직 안 정한 상태예요
·방식은 줄 세우기와 칸 나누기 두 가지, 줄이 반복되면 칸 나누기예요
·폰에서 옆으로 밀리면 화면보다 넓은 요소 하나를 찾는 문제예요
·증상을 그대로 말하세요. 어려운 단어를 외울 필요는 없어요
·어디인지 부르고, 원하는 그림과 폰에서의 모습까지 한 번에 말해요