🪄

스타일 가이드 작성하기

Created
2024/07/19 00:58
안녕하세요 볼드나인 프론트엔드 개발자 장예지입니다. 개발을 하다 보면 함께 작업을 해야 되는 경우가 많은데 각자 코드를 작성하다가 합치게 되었을 때 서로 다른 코드 때문에 어려움을 겪을 때가 있습니다. 이런 것을 방지하고자 현재 볼드나인에서는 스타일 가이드를 작성해서 적용하고 있습니다. 이 글에서는 스타일 가이드가 무엇인지? 어떻게 작성해야 되는지 살펴보도록 하겠습니다.

스타일 가이드란?

스타일 가이드는 우리가 코드를 작성할 때 지켜야 할 규칙과 권장 사항을 정의한 문서입니다. 스타일 가이드는 어떤 것이 옳다 그르다가 아닌 함께 코드를 작성하는 사람들 간의 약속입니다. 이 문서는 언어별로, 프로젝트별로 다를 수 있으며, 그 안에는 변수명, 함수명, 들여 쓰기, 주석 작성 방식, 파일 및 디렉토리 구조 등 다양한 내용이 포함됩니다. 이것은 단순히 문법적인 규칙을 넘어, 팀이 함께 작업할 때 일관성을 유지하고, 가독성과 유지 보수성을 높이는 데 중요한 역할을 합니다.

스타일 가이드가 필요한 이유

1.
코드의 일관성 유지: 스타일 가이드는 코드를 작성할 때 일관성을 유지하도록 도와줍니다. 같은 프로젝트 내에서 서로 다른 스타일로 작성된 코드는 이해하기 어렵고, 시간이 많이 소요될 수 있습니다. 스타일 가이드를 따르면 코드의 일관성을 유지할 수 있어, 가독성이 높아지고 유지 보수가 쉬워집니다.
2.
협업 효율성 향상: 개발은 여러 사람이 함께하는 작업이 많은데, 스타일 가이드는 팀원 간의 코드 작성 방식 차이로 인한 혼란을 줄여줍니다. 모든 팀원이 동일한 규칙을 따르기 때문에 코드 리뷰가 쉬워집니다.
3.
코드 품질 향상: 스타일 가이드는 코드 작성 시 지켜야 할 품질 기준을 제시합니다. 이는 코드의 가독성과 유지 보수성을 높이고, 잠재적인 오류를 예방하는 데 도움이 됩니다.
4.
신규 개발자 교육: 스타일 가이드는 새로운 개발자가 프로젝트에 빠르게 적응할 수 있도록 도와줍니다. 새로운 개발자는 스타일 가이드를 통해 프로젝트의 코드 작성 방식을 이해하고, 기존 코드와 일관된 스타일로 코드를 작성할 수 있습니다.

스타일 가이드 작성 방법

1.
기본 원칙 설정: 스타일 가이드를 작성할 때는 먼저 기본 원칙을 설정해야 합니다. 이는 전체적인 스타일 가이드의 방향을 결정하며, 구체적인 규칙을 설정하는 데 기준이 됩니다. 기본 원칙은 코드의 가독성, 일관성, 유지 보수성을 높이는 방향으로 설정해야 합니다. 볼드나인의 스타일 가이드를 예를 들어서 설명하면, "누구든 제안할 수 있으며 의견은 언제나 환영합니다.", "자신만의 스타일이 아닌 볼드나인의 스타일을 지향합니다."와 같은 원칙을 세워서 작성하고 있습니다.
2.
언어와 프레임워크에 맞는 규칙 정리: 사용 중인 프로그래밍 언어와 프레임워크에 맞는 구체적인 규칙을 정리해야 합니다. 이는 변수명, 함수명, 클래스명 등의 네이밍 규칙, 들여 쓰기와 공백 사용 규칙, 주석 작성 방식 등을 포함합니다. 예를 들어, JavaScript에서는 Airbnb JavaScript와 google의 스타일 가이드를 참고할 수 있습니다.
볼드나인 스타일 가이드 - 네이밍 규칙
3.
팀원의 의견 수렴: 스타일 가이드는 팀 전체가 따라야 하는 규칙이므로, 팀원의 의견을 수렴하여 작성해야 합니다. 이를 통해 팀원 모두가 동의하고 지킬 수 있는 스타일 가이드를 만들 수 있습니다. 팀원 간의 논의를 통해 다양한 의견을 반영하고, 최적의 규칙을 설정할 수 있습니다.
4.
문서화와 공유: 작성된 스타일 가이드는 문서로 정리하여 팀 내에서 공유해야 합니다. 현재 볼드나인의 스타일 가이드는 notion에 정리해서 공유하고 있습니다. 이런 문서화된 스타일 가이드는 모든 팀원이 쉽게 접근할 수 있어야 하며, 필요할 때 참고할 수 있도록 해야 합니다.
5.
정기적인 리뷰와 업데이트: 스타일 가이드는 한 번 작성했다고 끝나는 것이 아니라, 지속적으로 리뷰하고 업데이트해야 합니다. 프로젝트가 변화하고, 새로운 기술이 도입됨에 따라 스타일 가이드도 변화할 필요가 있습니다. 정기적인 리뷰를 통해 스타일 가이드를 최신 상태로 유지하고, 새로운 요구사항을 반영할 수 있습니다.
6.
자동화 도구 활용: 스타일 가이드 준수를 자동으로 검사하고, 코드 스타일을 자동으로 수정해 주는 도구를 활용하면 효과적입니다. 예를 들어, ESLint, Prettier 같은 도구를 사용하여 코드 스타일을 검사하고, 자동으로 수정할 수 있습니다. 이를 통해 개발자는 코드 작성에 집중할 수 있고, 스타일 가이드 준수 여부를 자동으로 확인할 수 있습니다.
볼드나인 스타일 가이드 - editor를 이용해서 코드줄을 제한

기존 코드까지 변경해야 하나요?

아니요.
스타일 가이드를 도입하면서 기존 코드까지 모두 변경해야 한다고 생각할 수 있지만, 사실 이는 매우 비효율적이고 시간이 많이 소요되는 작업입니다. 그래서 기존 코드는 그대로 두고, 새로운 코드에만 스타일 가이드를 적용하는 것이 더 현실적이고 효율적인 방법입니다. 또한 대대적인 변경은 예기치 않은 버그를 유발할 수 있습니다. 따라서, 볼드나인 팀은 기존 코드는 그대로 유지하고, 새로운 코드에 스타일 가이드를 적용하고 있습니다. 그러나 시간이 많고 인원도 많고 기존 코드도 다 변경하고 싶다면 변경하세요. 스타일 가이드는 팀마다 회사마다 적용 방법이 다르니까요.

결론

스타일 가이드는 단순한 규칙 집합을 넘어서, 팀의 문화와 코드 품질을 반영하는 중요한 문서입니다. 이를 잘 작성하고 준수하는 것은 코드의 일관성과 가독성을 높이고, 협업을 원활하게 하며, 유지 보수를 용이하게 합니다.
볼드나인 스타일 가이드를 작성하며 서로 코드에 대한 생각들도 알아갈 수 있고 코드의 일관성과 가독성도 높아져서 스타일 가이드 적용에 매우 만족하고 있습니다. 앞으로 많은 협의와 리뷰를 통해 볼드나인만의 스타일 가이드를 완성할 날을 기대하고 있습니다.