타이포그래피
텍스트 정렬
Text Alignment
텍스트 정렬은 문단의 각 줄을 왼쪽·가운데·오른쪽·양쪽 중 어느 쪽 기준에 붙일지 정하는 설정으로, 읽는 속도와 편안함을 좌우합니다.
텍스트 정렬은 문단이 어느 쪽 기준으로 놓일지 정합니다. 양쪽 정렬은 단어 사이 간격을 늘려 양끝을 맞추기 때문에 간격이 들쭉날쭉해질 수 있습니다.
정의
텍스트 정렬은 문단의 각 줄을 어느 쪽 기준으로 붙일지 정하는 설정입니다. 왼쪽, 가운데, 오른쪽, 그리고 양쪽 끝을 맞추는 양쪽 정렬(justify) 중에서 고릅니다. 우리가 글을 읽을 때 눈은 한 줄을 다 읽고 다음 줄의 시작점으로 되돌아오는 동작을 반복하는데, 이 시작점이 항상 같은 자리에 있으면 눈이 헤매지 않고 자연스럽게 이어 읽습니다. 그래서 시작점이 일정한 왼쪽 정렬이 긴 본문에 가장 편하고, 대부분의 화면에서 안전한 기본값이 됩니다. 참고로 여기서 말하는 정렬은 글자를 놓는 방향이고, 요소를 화면에 배치하는 정렬과는 이름만 같을 뿐 서로 다른 개념입니다.
왜 중요한가
정렬은 단순한 취향 문제가 아니라 읽는 속도와 피로에 곧바로 영향을 줍니다. 왼쪽 정렬은 모든 줄이 같은 세로선에서 시작하므로 눈이 다음 줄을 찾기 쉬워 본문에 잘 맞습니다. 가운데 정렬은 줄마다 시작점이 달라져, 줄이 길어질수록 눈이 매번 시작 위치를 새로 찾아야 해서 금방 지칩니다. 그래서 가운데 정렬은 짧은 제목이나 인용문처럼 한두 줄짜리에만 어울립니다. 양쪽 정렬은 양 끝을 반듯하게 맞춰 단정해 보이지만, 대신 단어 사이 간격을 억지로 늘리게 되어 공백이 세로로 이어지는 강(rivers) 현상이 생기기 쉽습니다. 이처럼 정렬 하나를 잘못 고르면 아무리 좋은 글도 읽기 불편해집니다.
흔한 실수
- 긴 본문을 가운데 정렬로 두는 경우입니다. 줄마다 시작점이 달라 눈이 매 줄 새로 위치를 찾아야 하므로, 문단이 길수록 읽기가 눈에 띄게 힘들어집니다. 가운데 정렬은 제목과 짧은 문구에만 쓰세요.
- 웹 본문에 양쪽 정렬을 아무 조치 없이 적용하는 경우입니다. 단어 간격이 줄마다 벌어지면서 공백이 세로로 이어지는 강이 생겨 오히려 지저분해 보입니다. 인쇄물과 달리 웹은 자동 하이픈 처리가 약해 이 문제가 더 두드러지고, 화면 폭이 좁을수록 한 줄에 들어가는 단어가 적어 간격이 더 크게 벌어집니다.
실무 팁
- 가운데 정렬은 짧은 제목과 인용에만, 양쪽 정렬은 웹 본문에서 되도록 피하고 쓰더라도 주의해서 사용하세요. 길이가 있는 읽을거리는 대부분 왼쪽 정렬이 가장 안전한 기본값이며, 확신이 서지 않을 때는 왼쪽 정렬로 두는 편이 실패가 적습니다.
- 한 화면 안에서 정렬 방식을 이것저것 섞지 마세요. 제목과 본문의 정렬이 제각각이면 시선의 흐름이 끊기므로, 특별한 이유가 없다면 같은 기준으로 통일하는 편이 깔끔합니다. 정렬을 바꾸는 순간에는 늘 그럴 만한 이유가 있어야 한다고 생각하면 실수가 줄어듭니다.
- 숫자나 가격이 든 목록은 오른쪽 정렬이 자릿수 비교에 유리할 수 있습니다. 다만 문장형 텍스트에는 어울리지 않으니, 오른쪽 정렬은 값을 나란히 견줘야 하는 경우로 한정하세요. 이때는 숫자 서식의 고정폭 숫자를 함께 쓰면 자릿수가 더욱 반듯하게 맞아떨어집니다.
AI에게 시키기
아래에 붙여넣을 CSS/JSX에서 text-align을 전부 찾아, 두 줄을 넘는 본문 문단은 예외 없이 text-align: left로 바꿔줘. 가운데 정렬(center)은 한두 줄짜리 제목·인용에만 남기고, 웹 본문의 양쪽 정렬(justify)은 단어 간격이 억지로 벌어지면서 공백이 세로로 이어지는 rivers가 생기고 웹은 자동 하이픈 처리도 약하니 전부 제거해줘. 바꾼 부분마다 원래 정렬 → 바뀐 정렬과 그 이유를 표로 정리해줘.
아래에 붙여넣을 표/목록 코드에서 금액·수량 같은 숫자 컬럼은 자릿수를 견주기 쉽게 text-align: right로 정렬하고, font-variant-numeric: tabular-nums(고정폭 숫자)를 함께 적용해 자릿수가 반듯하게 맞아떨어지게 해줘. 이름·설명 같은 문장형 텍스트 컬럼은 오른쪽 정렬이 어울리지 않으니 text-align: left 그대로 둬. 어떤 컬럼을 오른쪽으로 바꿨는지와 각 근거를 표로 알려줘.
이 화면은 [화면 성격 — 예: 상품 상세 + 가격표]야. 이 화면 전체에 적용할 텍스트 정렬 원칙을 정해줘. 본문은 왼쪽 정렬을 기본으로, 가운데 정렬은 한두 줄짜리 제목·인용에만, 오른쪽 정렬은 값을 나란히 비교하는 숫자 컬럼에만 쓰도록 하고, 한 화면 안에서 정렬을 이것저것 섞지 말고 특별한 이유가 없으면 같은 기준으로 통일해줘. 각 영역(제목·본문·숫자)에 어떤 정렬을 왜 쓰는지 규칙표로 정리해줘.