테두리

정의

테두리(border)는 요소의 가장자리를 따라 그리는 선으로, 그 요소가 어디에서 시작해 어디에서 끝나는지 경계를 또렷하게 보여 줍니다. 테두리는 세 가지 속성으로 성격이 정해집니다. 선이 얼마나 굵은지(두께), 어떤 모양인지(실선, 점선, 파선 등), 그리고 무슨 색인지입니다. 가는 실선은 조용히 영역만 나누고, 굵은 선은 강하게 존재감을 드러내며, 점선은 임시적이거나 비어 있는 자리를 암시하는 데 자주 쓰입니다. 같은 상자라도 테두리를 어떻게 주느냐에 따라 인상이 크게 달라집니다.

왜 중요한가

화면에서 요소끼리 경계를 만드는 방법은 크게 셋입니다. 테두리로 선을 긋는 방법, 그림자로 살짝 띄우는 방법, 그리고 배경색을 다르게 주어 은은하게 나누는 방법입니다. 이 중 테두리는 경계를 가장 명확하게 만드는 수단이라, 표의 칸을 나누거나 입력창의 범위를 알려 주는 것처럼 정확한 구분이 필요한 곳에서 특히 힘을 발휘합니다. 사용자는 입력창의 테두리를 보고 여기에 글자를 쓸 수 있겠구나 하고 곧바로 알아챕니다. 다만 테두리는 선이 눈에 또렷하게 남는 만큼, 화면에 선이 너무 많아지면 칸막이에 갇힌 듯 답답하고 복잡해 보입니다. 그래서 꼭 필요한 곳에만 쓰고, 나머지는 여백이나 옅은 배경색으로 나누는 절제가 화면을 훨씬 깔끔하게 만듭니다.

흔한 실수

• 모든 요소를 테두리로 감싸는 것입니다. 카드, 목록의 각 줄, 버튼까지 전부 선으로 두르면 화면이 격자에 갇힌 듯 답답해집니다. 구분이 꼭 필요한 곳에만 선을 쓰고 나머지는 여백으로 나누는 편이 훨씬 시원합니다.
• 테두리 색을 너무 진하게 주는 것입니다. 배경과 대비가 강한 검은 선은 내용보다 선이 먼저 눈에 들어와 시선을 빼앗습니다. 배경보다 조금만 어두운 회색 정도로 옅게 잡아야 경계는 살면서 내용이 주인공으로 남습니다.
• 테두리와 그림자와 배경색을 한 요소에 전부 겹쳐 쓰는 것입니다. 세 가지 모두 경계를 만드는 수단이라 함께 쌓으면 서로 효과가 중복돼 요소가 필요 이상으로 무거워 보입니다. 상황에 맞는 한 가지만 골라 쓰는 것이 훨씬 깔끔합니다.

실무 팁

• 경계를 만들 때 테두리, 그림자, 배경색 차이 중 상황에 맞는 하나를 고르세요. 명확한 구분이 필요하면 테두리, 떠 있는 느낌이 필요하면 그림자, 은은하게 묶고 싶으면 배경색 차이가 어울립니다. 세 가지를 한 요소에 다 겹쳐 쓰면 무거워집니다.
• 테두리 색은 별도 값으로 두지 말고 배경색에서 파생해 몇 단계 어둡게 만든 값으로 통일하세요. 그러면 여러 화면에 걸쳐 선의 톤이 일관되게 유지됩니다.
• 입력창처럼 상태 변화가 중요한 요소는 평소엔 옅은 테두리를, 포커스나 오류 상태에선 색이 진한 테두리를 주어 지금 상태를 선 하나로 분명하게 알려 주세요. 이렇게 하면 사용자는 지금 어디에 입력하고 있는지, 무엇이 잘못됐는지를 즉시 알아챕니다.

관련 개념