레이아웃·정렬의 의도
중앙정렬 vs 하단정렬·좌우교차
저는 정렬을 ‘장식’이 아니라 시선과 읽기 리듬을 만드는 장치로 다룹니다. 중앙정렬·다크카드는 시선을 한가운데로 모아 집중과 격을 만들고(시티오씨엘7 데모), 하단정렬·좌우교차 에디토리얼은 텍스트를 아래에 두고 좌우를 번갈아 배치해 여유로운 읽기 리듬을 만듭니다(운정 데모). 어느 쪽이 옳은 게 아니라, 현장의 메시지와 정보량이 정렬을 정합니다. 현장 맞춤 레이아웃은 PLOT 제작에 바로 포함됩니다.
- 정렬 = 시선·리듬을 만드는 의도. ‘예쁘게’가 아니라 읽히게·전환되게.
- 중앙정렬·다크카드 = 집중·격(시티오씨엘7) / 하단정렬·좌우교차 = 여유로운 읽기 리듬(운정).
- 정렬은 첫 화면→스크롤→엄지존 CTA로 이어지는 전환 동선과 정보구조(IA)를 만든다.
- 현장 맞춤 레이아웃은 PLOT 제작에 기본 포함 — 골격 복제+리컬러는 하지 않습니다.
왜 정렬을 ‘장식’이 아니라 ‘의도’라고 부르나?
레이아웃 작업을 할 때 제가 가장 먼저 정하는 건 색도 글꼴도 아닙니다. 정렬입니다. 정렬은 보는 사람의 시선이 어디서 시작해 어디로 흐를지를 결정하기 때문입니다. 똑같은 사진과 카피라도 가운데 모으면 인상이 또렷해지고, 아래로 내려 좌우로 풀면 천천히 읽히는 글처럼 바뀝니다. 그래서 저는 정렬을 ‘보기 좋게 줄 맞추는 일’이 아니라 시선과 리듬을 설계하는 의도로 다룹니다. 분양 사이트처럼 첫인상과 정보 전달, 문의 전환을 한 페이지에서 동시에 해내야 하는 화면에서는 이 의도가 결과를 가릅니다.
중앙정렬·다크카드는 무엇을 만드나? (시티오씨엘7)
시티오씨엘7 데모에서 저는 중앙정렬을 골랐습니다. 짙은 배경 위에 어두운 카드를 깔고, 단지명과 핵심 슬로건을 화면 한가운데에 모았습니다. 이렇게 하면 시선이 양옆으로 새지 않고 가운데로 빨려 들어가 집중이 생기고, 여백이 카드를 감싸면서 격(格)이 올라갑니다. 한 장의 강한 인상이 중요한 현장, 즉 “이름과 분위기를 한 번에 각인시키고 싶은” 단지에 어울리는 정렬입니다. 대신 정보가 많아지면 가운데로 계속 모으는 구조가 답답해질 수 있어, 중앙정렬은 적게 말하고 강하게 박는 화면일수록 잘 맞습니다.
하단정렬·좌우교차는 어떤 리듬을 만드나? (운정)
운정 데모에서는 정반대 의도를 골랐습니다. 카피를 화면 아래쪽에 정렬하고, 섹션마다 텍스트와 이미지의 좌우 위치를 번갈아 배치하는 좌우교차 에디토리얼 구조입니다. 하단정렬은 위쪽 이미지를 충분히 보여 준 뒤 시선을 자연스럽게 아래 텍스트로 떨어뜨리고, 좌우교차는 스크롤하며 시선이 좌→우→좌로 흐르게 만들어 여유로운 읽기 리듬을 줍니다. 입지·평면·생활 인프라처럼 읽을 정보가 많은 현장에서, 잡지를 넘기듯 읽히게 하려고 선택한 정렬입니다. 같은 분양 사이트라도 시티오씨엘7과 운정의 첫인상이 전혀 다른 이유가 여기에 있습니다.
| 정렬 방식 | 효과(시선·리듬) | 적합 현장 |
|---|---|---|
| 중앙정렬 · 다크카드 (시티오씨엘7) | 시선을 가운데로 모아 집중·격을 만든다. 한 장의 강한 인상. | 이름·분위기를 한 번에 각인시킬 고급·랜드마크 단지. 적게 말하고 강하게. |
| 하단정렬 · 좌우교차 (운정) | 텍스트를 아래에 두고 좌우를 번갈아 배치해 여유로운 읽기 리듬. | 입지·평면·인프라처럼 읽을 정보가 많은 현장. 에디토리얼하게 읽히게. |
▲ 어느 쪽이 ‘더 좋은’ 게 아니라, 현장이 무엇을 말해야 하는가가 정렬을 정합니다.
정렬은 정보구조(IA)·전환 동선과 어떻게 연결되나?
정렬은 그 자체로 끝이 아니라 정보구조(IA)와 전환 동선의 뼈대입니다. 저는 모든 화면을 첫 화면 → 스크롤 → 엄지존 CTA라는 한 흐름으로 설계합니다. 첫 화면에서 정렬로 시선을 어디에 모을지(중앙이냐, 아래냐)를 정하고, 스크롤 구간에서는 좌우교차나 단 구성으로 읽는 리듬을 만들며, 마지막에 문의로 향하게 합니다. 정렬이 흐트러지면 시선이 헤매 정보가 머리에 남지 않고, 결국 CTA를 놓칩니다. 전환을 만드는 화면의 원리는 전환되는 디자인의 원칙에서 더 깊이 다룹니다.
모바일에서는 정렬을 어떻게 다시 짜나?
분양 사이트는 대부분 모바일로 봅니다. 그래서 저는 정렬을 모바일 우선으로 다시 짭니다. PC에서 좌우교차였던 섹션은 모바일에서 세로로 쌓이는데, 이때 이미지와 텍스트의 순서를 그대로 두면 리듬이 깨집니다. 모바일에서는 시선이 위에서 아래로만 흐르므로, 각 섹션의 핵심 한 줄을 먼저 보이게 하고 가장 중요한 CTA를 화면 하단 엄지존에 고정합니다. 중앙정렬은 좁은 화면에서 오히려 안정적이고, 하단정렬은 이미지 비율만 조정하면 모바일에서도 그대로 읽힙니다. 모바일 정렬·속도의 구체적 기준은 반응형 웹 제작에서 이어집니다.
그리드와 여백은 정렬에서 무슨 역할을 하나?
정렬을 받쳐 주는 건 그리드와 여백입니다. 그리드는 좌우교차가 흐트러지지 않게 잡아 주는 보이지 않는 선이고, 여백은 중앙정렬의 카드에 격을 주는 공기입니다. 저는 여백을 ‘비어 있는 곳’이 아니라 시선을 쉬게 하고 다음으로 안내하는 장치로 씁니다. 카드 주변을 넉넉히 비우면 단지명이 더 또렷해지고, 좌우교차 사이에 호흡을 주면 잡지처럼 읽힙니다. 이 모든 것을 현장의 메시지에 맞춰 1:1로 짜는 것이 PLOT의 기본 방식입니다. 두 데모는 시티오씨엘7 시네마틱과 운정 포레스트에서 정렬 의도까지 함께 볼 수 있습니다.
현장 정보·평면·전환 설계를 한 흐름으로 보려면 → 분양 사이트 제작 안내.
자주 묻는 질문
중앙정렬과 하단정렬·좌우교차는 어떻게 다른가요?
분양 사이트는 어떤 정렬이 더 좋은가요?
정렬이 전환(문의)에 영향을 주나요?
현장 맞춤 레이아웃은 추가 비용인가요?
우리 현장엔 어떤 정렬이 맞을까?
현장 정보만 주시면 메시지·정보량에 맞춰 중앙정렬이냐 하단정렬·좌우교차냐부터 제안하고, 현장 맞춤 레이아웃을 반영한 견적을 무료로 보내드립니다. 골격을 복제해 색만 바꾸지 않습니다.
무료 견적 받기※ 본 글의 시티오씨엘7·운정 사례는 PLOT이 역량 시연을 위해 자체 제작한 데모·리디자인 컨셉이며, 실제 의뢰·감수·승인을 받은 것이 아닙니다. 정렬 효과에 대한 설명은 PLOT의 실제 설계 의도를 1인칭으로 기록한 것이고, 검증되지 않은 외부 통계·후기는 사용하지 않았습니다(날조 0). 분양 관련 표기는 해당 현장의 입주자모집공고 및 분양계약을 우선합니다. 최종 업데이트 .