Monday, October 21, 2019

VSCode에서 Dart/Flutter 코드 줄 길이(line length) 설정, 80자 제한을 넘어서
  /   No comments   

Flutter와 Dart로 애플리케이션을 개발할 때, Visual Studio Code(이하 VSCode)는 가장 강력하고 인기 있는 개발 도구 중 하나입니다. 하지만 많은 개발자들이 처음 마주하는 작지만 답답한 문제가 있습니다. 바로 한 줄에 쓸 수 있는 코드의 길이가 기본적으로 80자로 제한된다는 점입니다. 특히 위젯 트리가 깊어지는 Flutter의 특성상, 몇 단계의 들여쓰기만으로도 코드가 다음 줄로 넘어가 버려 가독성을 해치거나 개발 흐름을 끊는 경우가 빈번합니다. 공식 Dart 스타일 가이드가 80자를 권장하는 것은 사실이지만, 이는 절대적인 규칙이 아니며 현대의 와이드스크린 환경에서는 다소 구시대적인 기준으로 느껴질 수 있습니다.

이 글에서는 단순히 'dart.lineLength' 값을 바꾸는 방법을 넘어, 왜 이런 제한이 생겨났는지, 어떤 방법으로 조절할 수 있는지, 그리고 팀 프로젝트에서 일관성을 유지하기 위한 최선의 방법은 무엇인지에 대해 심도 깊게 파헤쳐 봅니다. 이 글을 끝까지 읽으신다면, 여러분은 더 이상 코드 자동 줄 바꿈 때문에 스트레스받지 않고, 자신의 개발 스타일에 맞는 최적의 환경을 구축할 수 있게 될 것입니다.

1. 80자 제한의 유래: 왜 우리는 좁은 화면에 코드를 가두었나?

현재의 불편함을 이해하기 위해서는 먼저 과거로의 여행이 필요합니다. '한 줄에 80자'라는 규칙은 프로그래밍 세계의 아주 오래된 유산 중 하나입니다. 이 규칙의 뿌리는 컴퓨터가 방 하나를 가득 채우던 시절, 바로 IBM 천공 카드(Punched Card)에서 시작됩니다.

1928년에 처음 등장한 IBM의 천공 카드는 80개의 열(column)을 가지고 있었습니다. 각 열은 하나의 문자를 나타냈고, 개발자들은 이 카드에 구멍을 뚫어 프로그램 코드와 데이터를 입력했습니다. 이 80열짜리 물리적 매체가 수십 년간 데이터 처리의 표준으로 자리 잡으면서, '80'이라는 숫자는 컴퓨터 세계에 깊이 각인되었습니다.

이후 1970년대와 80년대에 텍스트 기반의 컴퓨터 터미널이 등장했을 때도 이 유산은 이어졌습니다. DEC의 VT100과 같은 당시의 대표적인 터미널들은 대부분 가로 80자, 세로 24줄의 텍스트를 표시하는 것이 표준이었습니다. 하드웨어의 물리적 제약이 소프트웨어의 관례로 굳어진 것입니다. 개발자들은 이 80자 화면 안에서 모든 작업을 해야 했고, 자연스럽게 코드를 80자 이내로 작성하는 것이 당연한 문화가 되었습니다.

시간이 흘러 그래픽 사용자 인터페이스(GUI)와 고해상도 와이드스크린이 보편화된 오늘날에도 이 관습은 여전히 강력한 영향력을 발휘하고 있습니다. Python의 PEP 8 스타일 가이드, 그리고 우리가 사용하는 Dart의 공식 스타일 가이드 역시 80자를 '권장'합니다. 여기에는 몇 가지 현대적인 이유가 있습니다.

  • 가독성: 사람의 눈은 너무 긴 텍스트 줄을 한 번에 읽기 어려워합니다. 적절한 길이에서 줄이 바뀌면 시선의 이동이 줄어들어 코드를 더 쉽게 파악할 수 있다는 주장입니다.
  • 코드 리뷰의 용이성: GitHub나 GitLab과 같은 플랫폼에서 코드 변경 사항을 비교(diff)할 때, 두 개의 파일을 나란히 놓고 보는 경우가 많습니다. 이때 한 줄의 길이가 너무 길면 화면에 다 들어오지 않아 수평 스크롤이 발생하며, 이는 변경 사항을 파악하는 데 매우 비효율적입니다. 80자는 대부분의 'Side-by-Side Diff' 뷰에 완벽하게 들어맞는 길이입니다.
  • 코드 구조화 유도: 짧은 줄 길이는 개발자에게 복잡한 한 줄의 코드를 여러 줄로 나누거나, 함수나 클래스로 분리하도록 강제하는 효과가 있습니다. 이는 결과적으로 더 잘게 쪼개지고 구조화된 코드를 낳을 수 있다는 긍정적인 측면도 있습니다.

하지만 위에서 언급했듯, 특히 Flutter의 중첩된 위젯 구조와 같은 현대적인 프로그래밍 패러다임에서는 80자 제한이 오히려 코드의 수직 길이를 불필요하게 늘려 전체적인 구조 파악을 어렵게 만들기도 합니다. 이제 이 '오래된 약속'을 우리의 필요에 맞게 조절하는 방법을 본격적으로 알아보겠습니다.

2. 가장 빠르고 간단한 해결책: VSCode 사용자 설정(settings.json) 변경하기

개인 프로젝트를 진행하거나, 팀의 동의 없이 빠르게 자신만의 환경을 바꾸고 싶을 때 가장 효과적인 방법입니다. VSCode의 사용자 설정을 직접 수정하여 Dart 언어 확장 프로그램이 사용하는 줄 길이를 변경할 수 있습니다.

2.1. JSON 파일 직접 수정하기 (전문가 추천)

개발자에게 가장 익숙한 방법은 설정 파일을 텍스트로 직접 편집하는 것입니다. 이 방법은 정확하고 빠르며, 다른 설정들과의 관계를 한눈에 파악하기 좋습니다.

  1. 명령 팔레트(Command Palette) 열기:
    • Windows/Linux: Ctrl + Shift + P
    • macOS: Cmd + Shift + P

    VSCode의 거의 모든 기능은 이 명령 팔레트를 통해 접근할 수 있습니다.

  2. 사용자 설정(JSON) 파일 열기:

    명령 팔레트에 settings json 이라고 입력하면 여러 옵션이 나타납니다. 그중에서 '기본 설정: 사용자 설정 열기(JSON)' (Preferences: Open User Settings (JSON))를 선택하세요.

    (위 이미지는 이해를 돕기 위한 예시입니다)

  3. dart.lineLength 속성 추가 또는 수정:

    settings.json 파일이 열리면, 중괄호 { } 안의 어디든 다음 코드를 추가합니다. 만약 기존에 다른 설정들이 있다면, 쉼표(,)를 사용해 각 설정을 구분해야 합니다. 예를 들어, 줄 길이를 120자로 늘리고 싶다면 다음과 같이 작성합니다.

    
{
    // 기존에 있던 다른 설정들...
    "workbench.colorTheme": "Default Dark+",
    "editor.fontSize": 14,

    // 여기에 Dart 줄 길이 설정을 추가합니다.
    "dart.lineLength": 120
}

    만약 파일이 비어있다면 중괄호 안에 바로 넣어주면 됩니다. 값을 100, 140 등 원하는 숫자로 자유롭게 변경할 수 있습니다. 파일을 저장(Ctrl+S / Cmd+S)하는 즉시 설정이 적용됩니다.

2.2. 그래픽 인터페이스(GUI)로 설정하기

JSON 파일을 직접 편집하는 것이 부담스럽다면, VSCode가 제공하는 편리한 그래픽 설정 화면을 사용할 수 있습니다.

  1. 설정(Settings) 탭 열기:
    • 단축키: Ctrl + , (Windows/Linux) 또는 Cmd + , (macOS)
    • 메뉴: 파일 > 기본 설정 > 설정 (File > Preferences > Settings)
  2. 설정 검색:

    설정 탭 상단에 있는 검색창에 Dart Line Length 라고 입력합니다.

  3. 값 변경:

    검색 결과로 'Dart: Line Length'라는 항목이 나타납니다. 이 항목 아래의 입력 상자에 기본값인 80이 표시되어 있을 것입니다. 이 숫자를 원하는 값(예: 120)으로 변경하고 엔터 키를 누르거나 다른 곳을 클릭하면 자동으로 저장되고 적용됩니다.

2.3. 사용자 설정 vs 작업 영역 설정: 범위의 이해

VSCode의 설정은 두 가지 범위로 나뉩니다. 이 차이를 이해하는 것은 매우 중요합니다.

  • 사용자(User) 설정: 위에서 설명한 방법들은 모두 사용자 설정에 해당합니다. 여기에 설정된 값은 여러분의 컴퓨터에 설치된 VSCode에서 열리는 모든 프로젝트에 공통으로 적용됩니다. 즉, '전역 설정'입니다.
  • 작업 영역(Workspace) 설정: 이 설정은 현재 열려 있는 특정 프로젝트 폴더에만 적용됩니다. 프로젝트 루트 디렉토리에 .vscode 라는 폴더를 만들고 그 안에 settings.json 파일을 생성하여 설정합니다. 작업 영역 설정은 사용자 설정을 덮어씁니다(override). 팀원들과 코드 스타일을 통일해야 할 때 유용하게 사용될 수 있습니다. (하지만 더 좋은 방법이 아래 4장에서 소개됩니다.)

예를 들어, 여러분의 사용자 설정에 "dart.lineLength": 120 이라고 설정해 두었더라도, A라는 프로젝트의 .vscode/settings.json 파일에 "dart.lineLength": 100 이라고 되어 있다면, A 프로젝트에서는 줄 길이가 100자로 적용됩니다.

3. 코드 포맷터의 실제: dart format 명령어

VSCode에서 설정을 변경하면 코드 포맷팅이 마법처럼 일어나는 것 같지만, 사실 그 배후에는 Dart SDK에 포함된 강력한 커맨드라인 도구인 dart format 이 있습니다. VSCode의 Dart 확장 프로그램은 우리가 settings.json에 입력한 lineLength 값을 이 명령어에 전달해주는 '중개자' 역할을 할 뿐입니다.

터미널에서 이 도구를 직접 사용하는 방법을 알면 개발 환경에 대한 이해가 깊어지고, CI/CD 파이프라인과 같은 자동화 환경에서도 코드 스타일을 일관되게 유지할 수 있습니다.

VSCode 내장 터미널(Ctrl + `)이나 시스템의 기본 터미널을 열고 프로젝트 루트 디렉토리로 이동한 후 다음 명령어를 실행해 보세요.


# 현재 디렉토리와 하위의 모든 .dart 파일을 기본값(80자)으로 포맷팅
dart format .

# 줄 길이를 120자로 지정하여 포맷팅
dart format --line-length 120 .

# 축약형 옵션(-l)도 동일하게 동작
dart format -l 120 .

# 특정 파일만 지정하여 포맷팅
dart format -l 120 lib/main.dart lib/my_widget.dart

이처럼 --line-length 또는 -l 옵션을 통해 원하는 줄 길이를 명시적으로 지정할 수 있습니다. VSCode에서 '저장 시 자동 포맷' (editor.formatOnSave) 기능을 사용하고 있다면, 파일을 저장할 때마다 내부적으로 이와 유사한 명령이 실행되는 것입니다.

4. 팀 프로젝트를 위한 최상의 선택: analysis_options.yaml

지금까지 소개한 방법들은 개인 개발 환경을 설정하는 데는 훌륭하지만, 여러 명의 개발자가 함께하는 팀 프로젝트에서는 문제를 일으킬 소지가 있습니다. A 개발자는 120자, B 개발자는 100자, C 개발자는 기본값인 80자를 사용한다면, 각자 코드를 수정하고 저장할 때마다 포맷팅이 계속 변경되어 Git 커밋 히스토리가 지저분해지고 불필요한 충돌이 발생할 수 있습니다.

이러한 문제를 근본적으로 해결하고 모든 팀원이 동일한 코드 스타일을 공유하도록 강제하는 가장 확실하고 권장되는 방법은 프로젝트 루트에 analysis_options.yaml 파일을 사용하는 것입니다.

이 파일은 Dart의 정적 분석기(analyzer)와 포맷터(formatter)의 동작을 상세하게 제어하는 설정 파일입니다. 이 파일을 Git과 같은 버전 관리 시스템에 포함시키면, 프로젝트를 클론받는 모든 팀원은 별도의 에디터 설정 없이도 동일한 규칙을 적용받게 됩니다.

설정 방법

  1. Flutter/Dart 프로젝트의 루트 디렉토리(pubspec.yaml 파일이 있는 위치)에 analysis_options.yaml 라는 이름의 파일을 생성합니다. (Flutter 프로젝트 생성 시 기본적으로 포함되어 있습니다.)
  2. 파일을 열고 다음과 같은 내용을 추가하거나 수정합니다.

# 이 파일은 Dart 정적 분석기의 설정을 담고 있습니다.
# 더 많은 정보는 다음 링크를 참조하세요: https://dart.dev/guides/language/analysis-options

# 분석기 관련 설정 (linter 규칙 등)
analyzer:
  # 이 부분은 프로젝트의 필요에 따라 설정합니다.
  # exclude:
  #   - 'lib/generated/**'
  # errors:
  #   invalid_assignment: warning

# linter 규칙 활성화
linter:
  rules:
    # 여기에 원하는 linter 규칙들을 추가합니다.
    # 예:
    - prefer_const_constructors
    - avoid_print
    - camel_case_types


# ==========================================================
# 여기에 Dart 포맷터 설정을 추가합니다.
# 이 설정은 모든 팀원의 VSCode 설정이나 dart format 명령 옵션을 덮어씁니다.
# ==========================================================
dart_format:
  line_length: 120
  # 다른 포맷팅 옵션도 필요하다면 여기에 추가할 수 있습니다.
  # fixes:
  #   - style_guide

가장 중요한 부분은 마지막의 dart_format: 섹션입니다. 여기에 line_length: 120 과 같이 원하는 줄 길이를 명시하면, 이 프로젝트에서는 해당 설정이 최우선 순위를 갖게 됩니다.

설정의 우선순위

Dart 포맷터는 다음 순서로 설정을 확인하고 가장 먼저 발견되는 것을 적용합니다.

  1. analysis_options.yaml 파일의 dart_format 설정 (최우선)
  2. dart format 명령어 실행 시 --line-length 옵션
  3. VSCode의 작업 영역(Workspace) 설정 (.vscode/settings.json)
  4. VSCode의 사용자(User) 설정 (전역 settings.json)
  5. Dart 포맷터의 기본값 (80)

따라서, 팀 프로젝트에서는 반드시 analysis_options.yaml을 통해 줄 길이를 포함한 코드 스타일을 명시하고 관리하는 것이 바람직합니다. 이렇게 하면 개인의 개발 환경 차이로 인한 불필요한 논쟁과 시간 낭비를 막을 수 있습니다.

5. 줄 길이 논쟁: 길게 쓸 것인가, 짧게 쓸 것인가?

이제 줄 길이를 자유자재로 변경하는 방법을 모두 알게 되었습니다. 그렇다면 '최적의' 줄 길이는 과연 몇일까요? 이 질문에는 정답이 없으며, 장단점을 모두 고려하여 프로젝트와 팀의 특성에 맞게 결정해야 합니다.

긴 줄 길이(100~140자)의 장점

  • 현대적인 디스플레이 활용: 대부분의 개발자가 사용하는 와이드스크린 모니터의 넓은 공간을 효율적으로 사용할 수 있습니다. 80자로 설정하면 화면의 절반 이상이 비어있는 것처럼 느껴질 수 있습니다.
  • Flutter 위젯 가독성 향상: 깊은 들여쓰기를 가진 Flutter 코드가 불필요하게 여러 줄로 나뉘는 것을 방지합니다. 예를 들어, 아래 코드를 비교해 봅시다. 
    
// 80자 제한으로 포맷팅된 경우 (수직으로 너무 길어짐)
return Scaffold(
  body: Center(
    child: ElevatedButton(
      onPressed: () => print(
          'This is a very long string that will surely exceed the limit.'),
      child: const Text('Click Me'),
    ),
  ),
);

// 120자 제한으로 포맷팅된 경우 (구조가 한 눈에 들어옴)
return Scaffold(
  body: Center(
    child: ElevatedButton(
      onPressed: () => print('This is a very long string that will surely exceed the limit.'),
      child: const Text('Click Me'),
    ),
  ),
);
  • '계단 현상(Staircasing)' 감소: 코드가 계속해서 들여쓰기 되며 오른쪽 아래로 향하는 모양(일명 '피라미드의 비극')을 완화하여, 때로는 더 나은 가독성을 제공합니다.

전통적인 짧은 줄 길이(80자)의 장점

  • 집중력과 가독성: 신문이나 책의 단(column)이 좁은 이유와 같습니다. 시선이 좌우로 크게 움직이지 않아도 되어 내용에 더 집중할 수 있습니다.
  • 코드 리뷰의 절대 강자: 위에서 언급했듯, Side-by-side diff 뷰에서 수평 스크롤 없이 코드를 비교할 수 있다는 점은 협업 환경에서 매우 큰 장점입니다.
  • 더 나은 코드 구조 강제: 긴 표현식을 변수로 추출하거나, 긴 위젯을 별도의 메소드나 위젯 클래스로 분리하도록 유도합니다. 이는 장기적으로 코드의 재사용성과 유지보수성을 높일 수 있습니다.

결론: 어떻게 결정할까?

개인 프로젝트라면 여러분이 가장 편안하게 느끼는 길이를 선택하면 됩니다. 일반적으로 100자 또는 120자가 현대적인 환경과 전통적인 가독성 사이의 좋은 타협점으로 여겨집니다.

팀 프로젝트라면 반드시 팀원들과 논의하여 합의를 이루어야 합니다. 한 번 규칙을 정했다면 analysis_options.yaml에 명시하여 모두가 따르도록 하는 것이 핵심입니다.

6. 문제 해결: 설정이 적용되지 않을 때

"분명히 설정을 바꿨는데 왜 자동 줄 바꿈이 예전 그대로일까요?" 가끔 이런 문제에 부딪힐 수 있습니다. 다음 사항들을 순서대로 점검해 보세요.

  1. 최우선 순위 확인: 가장 먼저 프로젝트 루트에 analysis_options.yaml 파일이 있는지, 그 안에 dart_format 설정이 있는지 확인하세요. 만약 이 파일에 line_length: 80 이라고 적혀 있다면, 여러분이 VSCode 사용자 설정에서 아무리 값을 바꿔도 소용이 없습니다. 이 파일의 값을 수정해야 합니다.
  2. 설정 범위 확인: 사용자(User) 설정과 작업 영역(Workspace) 설정을 모두 확인하세요. .vscode/settings.json 파일이 프로젝트에 존재하고 여기에 다른 값이 설정되어 있다면 이 값이 우선 적용됩니다.
  3. Dart 분석 서버 재시작: VSCode가 설정을 제대로 인지하지 못하는 경우가 드물게 있습니다. 이럴 때는 분석 서버를 재시작해주면 해결될 수 있습니다.
    • 명령 팔레트(Ctrl+Shift+P)를 열고 'Dart: Restart Analysis Server'를 찾아 실행합니다.
  4. VSCode 재시작: 가장 고전적이지만 확실한 방법입니다. VSCode를 완전히 껐다가 다시 켜보세요.
  5. 파일 저장 확인: settings.json 이나 analysis_options.yaml 파일을 수정한 뒤, 반드시 저장했는지 다시 한번 확인하세요.

마치며: 나만의 최적화된 코딩 환경을 향해

Dart와 Flutter 코드의 줄 길이 제한은 단순한 숫자 조정을 넘어, 코드의 가독성, 협업의 효율성, 그리고 프로그래밍의 역사와 철학까지 엿볼 수 있는 흥미로운 주제입니다. 80자라는 전통적인 기준은 여전히 유효한 장점을 가지고 있지만, 기술의 발전과 개발 환경의 변화에 따라 우리에게는 이를 유연하게 조정할 선택권이 주어졌습니다.

이 글에서 다룬 내용을 요약하면 다음과 같습니다.

  • 개인적인 변경은 VSCode의 사용자 설정(settings.json)에서 dart.lineLength 값을 수정하는 것이 가장 빠릅니다.
  • 팀과의 일관성을 유지하기 위한 최선의 방법은 프로젝트 루트에 analysis_options.yaml 파일을 만들어 dart_format 규칙을 명시하는 것입니다.
  • 줄 길이는 장단점을 고려하여 개인의 선호도와 팀의 합의를 통해 결정해야 하며, 100~120자가 일반적인 타협점입니다.

이제 여러분은 답답했던 80자의 굴레에서 벗어나, 여러분의 눈과 뇌가 가장 편안하게 느끼는 환경에서 코딩할 수 있는 모든 지식과 도구를 갖추게 되었습니다. 생산성 높은 코딩 환경을 직접 구축하고 제어하는 즐거움을 만끽하시길 바랍니다.


0 개의 댓글:

Post a Comment