Articlestack.convex.dev·2026년 7월 6일·0

Readable TypeScript code: 14 patterns for humans and AI

Quick Summary

이 글은 인공지능 보조 도구가 빠르게 만든 타입스크립트 코드일수록 다음 사람이 읽고 고치기 쉬운 구조, 흐름, 타입 모델링이 더 중요하다고 설명한다.

Readable TypeScript code: 14 patterns for humans and AI 관련 대표 이미지

🖼️ 인포그래픽

Readable TypeScript code: 14 patterns for humans and AI 내용을 설명하는 본문 이미지

🖼️ 4컷 인포그래픽

Readable TypeScript code: 14 patterns for humans and AI 내용을 설명하는 본문 이미지

💡 한 줄 요약

이 글은 인공지능 보조 도구가 빠르게 만든 타입스크립트 코드일수록 다음 사람이 읽고 고치기 쉬운 구조, 흐름, 타입 모델링이 더 중요하다고 설명한다.

📌 핵심 요약

  • 글은 인공지능 보조 도구가 짧은 시간에 동작하는 리액트 컴포넌트를 만들 수는 있지만, 중첩 조건문과 불필요한 핸들러, 일관되지 않은 널 확인처럼 읽기 어려운 결과물을 자주 남긴다는 문제에서 출발한다.
  • 저자는 코드의 기준이 이제 ‘동료가 6개월 뒤 이해할 수 있는가’를 넘어 ‘동료와 새벽에 작업을 이어받은 인공지능 에이전트도 이해할 수 있는가’로 바뀌었다고 말하며, 의도와 제어 흐름과 타입의 명확성을 강조한다.
  • 읽기 쉬운 타입스크립트 코드는 짧은 함수, 이른 반환, 평평한 제어 흐름, 의미 있는 명시적 타입, 그리고 설계를 담는 타입 시스템을 통해 만들어지며, 영리함보다 첫 독해의 명료성이 중요하다고 정리한다.
  • 구체적 패턴으로는 함수와 컴포넌트를 짧게 유지하기, 중첩 조건문 대신 이른 반환 사용하기, 단일 문장 조건문의 중괄호 정책을 팀 단위로 일관되게 정하기, 기본적으로 재할당 없는 선언을 사용하기, 부정 조건과 이중 부정을 줄이기, 긴 위치 인자 대신 객체 인자를 쓰기 등이 제시된다.
  • 후반부에서는 값의 여러 형태를 구분자 유니언으로 모델링하고, 처리 누락을 컴파일러가 잡도록 전체성 검사를 추가하며, 같은 구분자 구조를 데이터베이스 스키마까지 확장해 화면 렌더링과 저장 검증을 하나의 상태 모델로 연결하는 방식을 설명한다.

🧩 주요 포인트

  1. 글은 인공지능 보조 도구가 짧은 시간에 동작하는 리액트 컴포넌트를 만들 수는 있지만, 중첩 조건문과 불필요한 핸들러, 일관되지 않은 널 확인처럼 읽기 어려운 결과물을 자주 남긴다는 문제에서 출발한다.
  2. 저자는 코드의 기준이 이제 ‘동료가 6개월 뒤 이해할 수 있는가’를 넘어 ‘동료와 새벽에 작업을 이어받은 인공지능 에이전트도 이해할 수 있는가’로 바뀌었다고 말하며, 의도와 제어 흐름과 타입의 명확성을 강조한다.
  3. 읽기 쉬운 타입스크립트 코드는 짧은 함수, 이른 반환, 평평한 제어 흐름, 의미 있는 명시적 타입, 그리고 설계를 담는 타입 시스템을 통해 만들어지며, 영리함보다 첫 독해의 명료성이 중요하다고 정리한다.
  4. 구체적 패턴으로는 함수와 컴포넌트를 짧게 유지하기, 중첩 조건문 대신 이른 반환 사용하기, 단일 문장 조건문의 중괄호 정책을 팀 단위로 일관되게 정하기, 기본적으로 재할당 없는 선언을 사용하기, 부정 조건과 이중 부정을 줄이기, 긴 위치 인자 대신 객체 인자를 쓰기 등이 제시된다.
  5. 후반부에서는 값의 여러 형태를 구분자 유니언으로 모델링하고, 처리 누락을 컴파일러가 잡도록 전체성 검사를 추가하며, 같은 구분자 구조를 데이터베이스 스키마까지 확장해 화면 렌더링과 저장 검증을 하나의 상태 모델로 연결하는 방식을 설명한다.

🧠 상세 정리

1. 문제 제기: 빠르게 작성됐지만 느리게 읽히는 코드

저자는 인공지능 보조 도구가 12초 만에 200줄짜리 리액트 컴포넌트를 생성한 경험으로 글을 시작한다. 그 코드는 작동했지만, 중첩 삼항 연산자와 필요 없는 위로 끌어올린 핸들러, 같은 파일 안의 여러 널 확인 방식 때문에 생산 코드라고 부르기 민망할 정도로 읽기 어려웠다. 저자가 보기에 이것은 소프트웨어에서 가장 나쁜 절충이다. 코드는 쓰이는 시간보다 읽히는 시간이 훨씬 많기 때문에, 빠른 초안 작성으로 얻은 이익은 이후 유지보수에서 더 큰 비용으로 돌아온다.

2. 새로운 독자 기준: 사람과 인공지능 에이전트 모두가 이해해야 한다

과거의 기준은 6개월 뒤 팀원이 코드를 따라갈 수 있는지였다면, 저자는 이제 같은 기준에 인공지능 에이전트까지 포함해야 한다고 말한다. 새벽에 티켓을 이어받은 에이전트가 기존 코드를 수정하려면, 사람과 마찬가지로 의도가 첫눈에 보여야 하고 제어 흐름이 머릿속 화이트보드를 요구하지 않아야 한다. 타입도 단순히 컴파일러를 만족시키는 수준이 아니라, 값과 설계가 무엇을 의미하는지 설명해야 한다. 즉 읽기 쉬움은 사람에게만 필요한 미덕이 아니라, 다음 자동화 작업의 성공률을 높이는 조건이기도 하다.

3. 인공지능 시대에도 가독성이 더 중요해지는 이유

저자는 인공지능이 코드 작성에 참여할수록 가독성의 중요성이 줄어드는 것이 아니라 오히려 커진다고 주장한다. 인공지능 보조 도구는 코드를 빠르게 생성하는 데 강하지만, 다음 독자가 세 번 다시 읽지 않고 이해할 수 있는 코드를 항상 만들어 주지는 않는다. 컴파일되고 테스트를 통과했다는 이유만으로 생성 코드를 완성물로 취급하면, 몇 주 뒤 그 의도를 아무도 기억하지 못해 기능을 다시 작성하는 일이 생긴다. 결국 가독성은 다음 독자가 첫 시도에 올바른 변경을 할 수 있게 만드는 속성이고, 그 독자는 사람일 수도 모델일 수도 있다.

4. 읽기 쉬운 타입스크립트의 핵심 특성

글에서 말하는 읽기 쉬운 타입스크립트 코드는 의도가 즉시 드러나고, 제어 흐름이 평평하며, 타입 시스템이 설계를 떠받치는 코드다. 이를 위해 저자는 짧은 함수, 중첩 조건문 대신 이른 반환, 변형 상태를 표현하는 구분자 유니언, 독자에게 도움이 되는 명시적 타입을 강조한다. 이런 기준에서 영리한 표현이나 과도한 기교는 중요한 요소가 아니다. 피곤한 개발자나 이미 여러 프롬프트를 거친 인공지능 에이전트가 코드를 안전하게 바꿀 수 있어야 하며, 이것이 장기적으로 다시 쓰지 않아도 되는 코드베이스를 만든다는 설명이다.

5. 짧은 함수와 이른 반환으로 제어 흐름을 단순화하기

첫 번째 패턴은 함수와 컴포넌트를 짧게 유지하는 것이다. 함수가 한 화면을 넘어가고 스크롤해야 이해된다면, 그 안에 독립된 역할이 생겼다는 신호이므로 이름 붙일 수 있는 부분을 분리해야 한다. 저자는 한 문장으로 설명할 때 ‘그리고’가 필요하다면 그 함수가 두 가지 일을 하는 것일 수 있다고 본다. 이어서 이른 반환을 사용하면 중첩 조건문을 줄이고, 독자가 조건을 위에서 아래로 하나씩 처리할 수 있어 열린 중괄호의 맥락을 계속 기억하지 않아도 된다고 설명한다.

6. 일관된 조건문 표현과 재할당 최소화

저자는 단일 문장 조건문에서는 중괄호를 생략하는 방식이 더 깨끗하게 읽힌다고 말하지만, 이 부분이 논쟁적이라는 점도 인정한다. 어떤 팀은 두 번째 줄을 추가할 때 조건 범위가 깨질 위험 때문에 항상 중괄호를 요구할 수 있고, 저자는 그런 입장도 방어 가능하다고 본다. 중요한 것은 팀이 한쪽을 선택해 포매터와 린터로 일관되게 강제하는 것이다. 또한 기본적으로 재할당 없는 선언을 사용하면 독자가 그 이름이 같은 스코프 안에서 계속 같은 값을 가리킨다는 사실을 알 수 있어, 아래쪽을 훑으며 값이 바뀌는지 확인해야 하는 부담이 줄어든다.

7. 부정 표현, 이중 부정, 위치 인자를 줄여 호출부를 읽기 쉽게 만들기

저자는 삼항 연산자 안의 부정 조건이 독자에게 불필요한 정신적 반전을 요구한다고 보고, 조건을 긍정 형태로 바꾸고 분기를 교체하라고 권한다. 값의 존재 여부를 불리언으로 바꾸는 경우에도 이중 부정보다는 명시적인 불리언 변환이 의미를 더 직접적으로 드러낸다고 설명한다. 제이에스엑스에서 논리 곱 렌더링은 값이 0이나 빈 문자열일 때 의도치 않은 결과를 만들 수 있으므로, 양쪽 분기가 보이는 삼항 표현이 더 안전하다고 본다. 긴 위치 인자 목록도 호출부만 봐서는 각 인자의 의미를 알기 어려우므로, 객체 인자를 사용해 받는 사람, 제목, 템플릿, 우선순위 같은 의도를 이름으로 드러내라고 제안한다.

8. 구분자 유니언과 전체성 검사로 상태 모델을 타입에 담기

후반부에서 저자는 값이 여러 형태 중 하나가 될 수 있다면 선택적 필드가 많은 단일 타입보다 구분자 유니언으로 모델링하라고 말한다. 각 변형에 리터럴 태그를 두면 분기 안에서 타입스크립트가 자동으로 타입을 좁혀 주므로, 형 변환이나 임시적인 선택적 접근 없이 필요한 필드를 안전하게 사용할 수 있다. 여기에 처리하지 않은 변형을 받으면 실패하는 전체성 검사 도우미를 추가하면, 새 변형을 넣었을 때 컴파일러가 수정해야 할 지점을 알려 준다. 저자는 같은 구분자 구조를 데이터베이스 스키마까지 확장하면 리액트 렌더링, 쓰기 검증, 상태 전이가 하나의 모델로 이어져 중복 없이 설계를 끝까지 유지할 수 있다고 설명한다.

🧾 핵심 주장 / 시사점

  • 이 글의 핵심은 인공지능이 코드를 더 빨리 쓰게 만들수록, 사람이 나중에 해석해야 하는 비용과 에이전트가 다시 수정해야 하는 비용을 줄이는 설계 규칙이 더 중요해진다는 점이다.
  • 저자가 제시한 패턴들은 새로운 도구나 프레임워크보다 함수 길이, 조건 흐름, 인자 형태, 타입 모델링 같은 기본기를 정돈하는 데 집중하며, 실제 유지보수의 병목이 ‘작성 속도’보다 ‘정확한 이해’에 있음을 보여 준다.
  • 구분자 유니언과 전체성 검사를 데이터베이스 스키마까지 연결하라는 조언은 타입을 단순한 주석 대체물이 아니라 애플리케이션 상태 설계의 중심으로 쓰라는 메시지로 읽힌다.

✅ 액션 아이템

  • AI 보조로 만든 코드일수록 동료와 다음 담당 AI가 읽기 쉬워야 하므로 함수와 컴포넌트 길이를 제한하고 짧은 단위로 분해한다.
  • 재할당 최소화, 객체 인자 도입, 부정 조건 축소를 결합해 제어 흐름을 평평하게 만들고 첫 독해 명료성을 높인다.
  • 구분자 유니언으로 상태 타입을 설계하고 전체성 검사를 넣어 처리 누락을 컴파일러가 잡게 한 뒤 렌더링·스키마 검증에 같은 상태 모델을 반영한다.

❓ 열린 질문

  • 함수·컴포넌트의 길이 상한과 매개변수 개수는 어떤 기준으로 고정해야 적정한가?
  • 단일 문장 조건문의 중괄호 규칙은 팀 전체에서 어디까지 일괄 적용하고 어떤 경우만 예외로 둘 것인가?
  • 구분자 유니언을 데이터베이스 스키마까지 확장할 때 기존 데이터와 충돌 없이 어느 범위부터 반영하는 것이 안전한가?

관련 문서

공통 태그와 주제 흐름을 기준으로 같이 보면 좋은 문서를 이어서 제안합니다.