코드를 디자인하다 - 아름다운 코드 작성을 위한 원칙

'코딩하는 디자이너'라는 말, 들어보셨나요? 주변에서 종종 디자인도 잘하면서 코딩까지 하는, 다재다능한 분들을 보게됩니다. 디자인을 잘하면 코딩도 잘한다? 지금 소개해드리는 미디엄 저브(ZURB)의 글을 읽고나면 이 말이 어느 정도 일리가 있다고 생각하실지도 모릅니다. 

디자이너들은 이미 깔끔하고 사용 가능한 코드를 작성할 준비가 되어있습니다. 시각 디자인의 기본 원칙을 코딩에도 적용할 수 있기 때문인데요. 코드의 품질 향상에 도움을 주는 몇 가지 시각 디자인 원리에 대해 알아보겠습니다.

계층(Hierarchy)

코드에는 논리적인 구조가 있어야 하며, 마크업의 일관된 들여쓰기를 통해 읽기 쉬워야 합니다. 여러분이 CSS의 구조를 만드는 데 사용하는 논리는 프로젝트에 따라 달라질 수 있습니다. 많은 내비게이션 요소와 툴바가 있는 어플리케이션을 작업하는 경우, 더 찾기 쉽고 빠르게 스타일을 입힐 수 있도록 요소들을 한곳에 모아두기도 합니다. 단순한 마케팅 사이트는 헤더, 내비게이션, 콘텐츠, 푸터의 시각적인 레이아웃과 비슷하게 구성될 수 있습니다.

모듈화(Modularity)

자주 사용하는 요소를 개별 파일로 만들고, 백엔드 언어를 이용하여 페이지에 포함시킵니다. 이런 식으로 푸터, 헤더, 내비게이션을 보다 편하게 사용할 수 있습니다. 반복해서 사용하는 요소에 독특하고 일관성 있는 클래스명을 지정하면, 어디에서든 같은 스타일을 부여할 수 있습니다.

단위화(Chunking)

단위화는 HTML 엘리먼트의 모듈화와 비슷하지만, 스타일에 있어서는 다릅니다. 스타일링을 하는 요소들을 개별 CSS파일로 분리합니다. 버튼에 대한 스타일을 button.css 에 담고, 네비게이션은 nav.css에 담는다면, 프로젝트를 진행하는 가운데 새로운 구성원이 와도 쉽게 코드 편집을 할 수 있습니다. 

저는 CSS개발의 생산성을 위해 CSS 전처리기(Pre-processor)인 LESS나 SASS를 사용하기도 하는데요. 프로젝트가 끝난 후에 코드를 봐도 파악이 쉬웠습니다.

일관성(Consistency)

클래스명을 정하는 것 때문에 한참 고민을 했던 적이 있었습니다. 요소에 일관된 레이블링 시스템을 적용하는 것은 중요한데요. 프론트엔드 프레임웍인 Foundation의 경우, 전체적으로 모두 소문자를 사용하고 하이픈으로 구분된 (all-lowercase-hyphen-separated) 변수를 사용합니다. 

어플리케이션에서 공통된 기능이 각기 다른 부분에 필요하다면, 그 요소의 동작을 드러낼 수 있는 동일한 레이블로 유사한 코드를 작성해보세요. 이렇게 하면, 그 요소들을 반복해서 사용하기가 쉬워집니다. 

또한 여러분의 코딩 스타일도 일관되게 유지해야 합니다. 여러 가지 스타일을 혼용하는 것 보다, 자신에게 편한 방식을 선택하고 그에 충실하는 것이 좋습니다.

구성(Framing)

명확하게 주석을 달고, 코드 버전에 대해 상세히 설명하는 커밋 메시지를 추가하여, 코드의 틀과 내용을 구성합니다. 검색이 가능하고 변경사항을 설명할 수 있게 커밋 메세지를 작성하는 연습을 해보세요.

이와 같은 원칙들을 고려하면, 함께 코드를 읽고 쓰는 이들에게 괴로움보다는 즐거움을 줄 수 있지 않을까요? 효과적인 협업과 생산성을 위해, 보다 '아름다운' 코드를 작성하는 방법을 팀원들과 이야기해보는 것은 어떨까요.

출처 : Medium ZURB

by 비숑 발자국