나 혼자 산다. 바이브코딩과 함께. 14장

14장. AI가 만든 코드 이해하기 — 읽을 줄은 알아야 한다

Part 5: 바이브 코딩 고급편

14.1 왜 코드를 읽어야 하는가

AI 도구를 사용하면서 가장 중요한 깨달음 중 하나는 '생성된 코드를 이해해야 한다'는 것입니다. 많은 초보자들이 ChatGPT나 Claude에게 코드를 생성받고 그냥 복사-붙여넣기로 자신의 프로젝트에 넣어버립니다. 이런 접근은 단기적으로는 작동할 수 있지만, 장기적으로는 심각한 문제를 야기합니다. 코드를 읽고 이해하지 못하면, 버그가 발생했을 때 수정할 수 없고, 코드를 수정해야 할 때도 손을 못 댑니다. 또한 보안 취약점이나 성능 문제도 발견하지 못합니다.

더 나아가, 코드를 읽을 수 있다는 것은 AI와의 대화의 질을 높입니다. AI에게 정확한 요청을 하려면, 이전에 생성된 코드의 어느 부분을 수정하고 싶은지 명확히 설명해야 합니다. 코드를 읽지 못하면 'AI한테 더 많은 일을 시켜야 한다'고 생각하게 되고, 결국 AI에게 의존하게 됩니다. 반대로 코드를 읽을 수 있으면, 작은 부분만 AI에게 물어보고 나머지는 스스로 수정할 수 있습니다.

실제로 전문 개발자들도 코드 리뷰(code review)를 매우 중요하게 생각합니다. 팀의 다른 개발자가 작성한 코드를 읽고, 버그가 있는지, 더 나은 방법이 있는지 검토하는 것이 개발 과정의 필수 부분입니다. 당신이 AI 도구를 사용한다면, 당신이 AI 코드 리뷰어가 되어야 합니다. AI가 생성한 코드가 안전한지, 효율적인지, 당신의 프로젝트에 맞는지 확인하는 책임은 당신에게 있습니다.

코드를 읽는 능력은 또한 프로그래밍 실력의 진정한 척도입니다. 코드를 쓸 수 있는 것과 읽을 수 있는 것은 다릅니다. 좋은 프로그래머는 다른 사람의 코드를 빠르고 정확하게 파악할 수 있습니다. 이 능력은 팀 프로젝트에서, 오픈소스 기여에서, 그리고 유지보수 작업에서 필수입니다. AI 시대에도 이 원칙은 변하지 않습니다.

 

14.2 코드의 기본 구조 읽기(변수/함수/조건문)

변수 읽기

코드를 읽을 때 가장 먼저 봐야 할 것은 변수입니다. 변수는 코드가 사용하는 정보를 저장하는 상자라고 생각할 수 있습니다. 예를 들어 'let userName = "김철수"'라는 코드를 보면, userName이라는 변수가 '김철수'라는 텍스트를 저장하고 있다는 의미입니다. 변수의 이름을 보면 그 변수가 어떤 정보를 저장하는지 대략 알 수 있습니다.

좋은 코드는 변수 이름이 명확합니다. 'let x = 5'보다는 'let userAge = 5'가 훨씬 읽기 쉽습니다. AI가 생성한 코드를 읽을 때, 변수 이름이 이상하거나 단순하면 AI에게 요청해서 수정하도록 할 수 있습니다. 예를 들어 'let arr = [1, 2, 3]'이라는 코드를 본다면, 이것이 무엇의 배열인지 불분명합니다. 'let studentIds = [1, 2, 3]'이라고 수정하면 훨씬 명확합니다.

변수의 종류도 중요합니다. JavaScript에서는 'let', 'const', 'var' 등이 있습니다. 일반적으로 'const'는 변하지 않는 값에, 'let'은 변할 수 있는 값에 사용합니다. 최신 코드에서 'var'를 본다면, 이것은 오래된 방식일 가능성이 높습니다. AI가 생성한 코드를 읽을 때, 이런 세부사항도 확인해야 합니다.

  팁: 변수 이름의 명확성

  변수를 읽을 때, 이름만 봐도 어떤 정보를 저장하는지 알 수 있는지 확인하세요. 아니라면 코드를 수정하도록 AI에게 요청하세요.

함수 읽기

함수는 코드의 작은 프로그램이라고 생각할 수 있습니다. 함수를 읽을 때는 세 가지를 확인합니다: 함수의 이름, 입력값(매개변수), 그리고 결과값(반환값)입니다. 예를 들어 'function calculateTotal(price, tax)'라는 함수를 보면, 이 함수는 가격과 세금을 입력받는다는 것을 알 수 있습니다. 그리고 'return price + tax'라는 코드가 있으면, 이 함수는 두 값의 합을 결과로 반환한다는 것을 알 수 있습니다.

함수를 읽을 때는 함수 내부의 모든 코드를 자세히 이해할 필요는 없습니다. 함수가 무엇을 입력받고, 무엇을 출력하는지만 알면 됩니다. 이것을 '함수의 인터페이스'라고 부릅니다. 예를 들어 'sendEmail(to, subject, message)' 함수를 본다면, 이 함수가 정확히 어떻게 이메일을 보내는지 모르더라도, 이메일 주소, 제목, 메시지를 입력하면 이메일이 전송된다는 것을 알 수 있으면 충분합니다.

화살표 함수(arrow function)도 자주 보입니다. 'const add = (a, b) => a + b'는 a와 b를 더하는 함수입니다. 화살표 함수는 함수를 더 간결하게 쓰는 방식입니다. 최신 JavaScript 코드에서는 이런 화살표 함수가 매우 자주 사용됩니다. AI가 생성한 코드에도 화살표 함수가 많을 가능성이 높습니다.

함수를 읽을 때 또 하나 확인해야 할 것은 함수가 부작용(side effect)을 가지는지입니다. 부작용이란 함수가 외부 상태를 변경하는 것을 의미합니다. 예를 들어 함수가 데이터베이스에 데이터를 저장하거나, 파일을 수정하거나, 콘솔에 메시지를 출력하는 경우입니다. 이런 부작용이 있는 함수는 주의해서 사용해야 합니다.

  함수 읽기의 핵심

  함수의 이름과 매개변수, 반환값만 봐도 그 함수가 무엇을 하는지 알 수 있어야 합니다. 이것을 확인하세요.

조건문 읽기

조건문은 'if', 'else', 'else if' 등의 키워드를 사용합니다. 조건문을 읽을 때는 어떤 조건에서 어떤 코드가 실행되는지 파악해야 합니다. 예를 들어 'if (age >= 18) { console.log("성인"); } else { console.log("미성년자"); }'라는 코드를 보면, 나이가 18 이상이면 '성인'을 출력하고, 그렇지 않으면 '미성년자'를 출력한다는 의미입니다.

조건문을 읽을 때 주의할 점은 논리 연산자(&&, ||, !)를 이해하는 것입니다. '&&'는 '그리고'를 의미하고, '||'는 '또는'을 의미합니다. '!'는 '아니다'를 의미합니다. 예를 들어 'if (age >= 18 && hasLicense) { console.log("운전 가능"); }'라는 코드는 나이가 18 이상이면서 동시에 면허를 가지고 있어야 운전 가능하다는 의미입니다.

삼항 연산자(ternary operator)도 조건을 간결하게 표현합니다. 'const message = age >= 18 ? "성인" : "미성년자"'는 위의 if-else 문을 한 줄로 표현한 것입니다. AI가 생성한 코드에서 이런 삼항 연산자를 자주 볼 것입니다.

switch 문도 조건을 표현하는 방법입니다. 여러 경우를 처리할 때 if-else 대신 switch를 사용하면 코드가 더 명확해질 수 있습니다. 예를 들어 요일을 숫자로 입력받아서 요일 이름을 출력하는 경우, switch 문을 사용하면 읽기 더 쉬운 코드가 됩니다.

 

14.3 파일 구조 이해하기: 프로젝트의 지도

코드를 읽는 것은 마치 건물의 구조를 이해하는 것과 같습니다. 파일들이 어떻게 조직되어 있는지, 어떤 파일이 어떤 파일을 사용하는지 이해해야 합니다. 프로젝트의 파일 구조를 읽을 때 가장 먼저 봐야 할 것은 디렉토리(폴더) 구조입니다. 좋은 프로젝트는 파일들이 논리적으로 조직되어 있습니다.

일반적인 웹 프로젝트의 구조는 다음과 같습니다. 루트 디렉토리에는 'package.json'이 있습니다. 이 파일은 프로젝트의 설정과 의존성 정보를 담고 있습니다. 그 아래 'src' 폴더에는 소스 코드가 있습니다. 'public' 폴더에는 정적 파일(이미지, HTML 등)이 있습니다. 'node_modules' 폴더에는 외부 라이브러리들이 설치됩니다.

'src' 폴더 내부도 더 세분화됩니다. React 프로젝트라면 'components' 폴더에 컴포넌트들이, 'pages' 폴더에 페이지들이, 'utils' 폴더에 유틸리티 함수들이 있을 수 있습니다. 이런 구조를 이해하면, 특정 기능을 수정해야 할 때 어떤 파일을 찾아야 하는지 알 수 있습니다.

파일의 이름도 중요합니다. 좋은 프로젝트는 파일 이름으로 그 파일이 무엇을 하는지 알 수 있습니다. 'UserCard.js'는 사용자 정보를 표시하는 카드 컴포넌트일 것이고, 'api.js'는 서버와 통신하는 함수들을 담고 있을 것입니다. 파일 이름이 'temp.js'나 'test2.js' 같이 모호하다면, 이것은 주의가 필요한 신호입니다.

  파일 구조 읽기

  프로젝트 폴더를 열었을 때, 어떤 폴더에 어떤 파일이 있는지 이해할 수 있는지 확인하세요. 파일과 폴더의 이름이 명확하면 좋은 구조입니다.

 

14.4 패키지와 라이브러리

현대의 프로그래밍은 '바퀴를 다시 발명하지 않기'를 원칙으로 합니다. 이미 만들어진 코드를 재사용하는 것이 효율적이기 때문입니다. 이렇게 재사용되는 코드의 묶음을 '패키지' 또는 '라이브러리'라고 부릅니다. npm(Node Package Manager)은 이런 패키지들을 관리하는 도구입니다.

package.json 파일을 보면 프로젝트가 어떤 외부 패키지를 사용하는지 알 수 있습니다. 예를 들어 'React', 'Express', 'Lodash' 등이 나열되어 있을 것입니다. 이것은 이 프로젝트가 이 패키지들에 의존한다는 의미입니다. AI가 생성한 코드에서 낯선 패키지가 import되어 있다면, 그 패키지가 정말 필요한 것인지 확인해야 합니다.

패키지를 읽을 때는 버전도 중요합니다. package.json에서 버전은 'express: ^4.18.0' 같은 형식으로 표기됩니다. '^' 기호는 마이너 버전은 바뀔 수 있지만 메이저 버전은 같아야 한다는 의미입니다. 버전이 오래되면 보안 문제가 있을 수 있습니다. 따라서 정기적으로 패키지를 업데이트해야 합니다.

'dependencies'와 'devDependencies'의 차이도 알아야 합니다. dependencies는 프로덕션 환경에서도 필요한 패키지입니다. 반면 devDependencies는 개발할 때만 필요한 패키지입니다. 예를 들어 'webpack'이나 'babel'은 코드를 빌드할 때만 필요하므로 devDependencies에 들어갑니다.

패키지 선택도 중요합니다. 같은 기능을 하는 패키지가 여러 개 있을 수 있습니다. 선택할 때는 얼마나 많은 사람들이 사용하는지(다운로드 수), 최근에 유지보수되고 있는지, 보안 문제가 없는지 등을 확인해야 합니다. 특히 생산 환경에서는 알려지지 않은 패키지를 사용하는 것이 위험할 수 있습니다.

 

14.5 AI에게 코드 설명 요청하는 방법

코드를 읽다가 이해가 안 되는 부분이 있을 때, AI에게 설명을 요청할 수 있습니다. 하지만 단순히 '이 코드가 뭐하는 거야?'라고 묻는 것보다 더 효과적인 방법이 있습니다. 먼저 코드를 AI에게 그대로 복사-붙여넣기합니다. 그리고 구체적인 질문을 합니다. '이 코드에서 forEach 함수는 뭐하는 거야?', '왜 이 부분에 async/await가 있어?', '이 변수는 언제 변해?' 같은 질문이 좋습니다.

효과적인 프롬프트는 다음과 같은 구조를 가집니다. 먼저 코드를 제시합니다. 그 다음 구체적인 질문을 합니다. 마지막으로 당신의 이해 수준을 명시합니다. 예를 들어 'const과 let의 차이는 알고 있지만, 화살표 함수가 여기서 어떻게 작동하는지 모르겠어'라고 하면, AI가 당신의 수준에 맞춰 설명할 수 있습니다.

코드의 목적을 설명해달라고 하면, AI가 고수준의 설명을 해줍니다. 예를 들어 '이 함수의 목적이 뭔가요?'라고 하면, '사용자 입력을 검증하는 함수입니다'라고 답할 것입니다. 반면 '이 부분에서 이 연산자는 뭐하는 거예요?'라고 하면, AI가 구체적인 연산자의 작동을 설명합니다.

AI에게 설명을 요청할 때 주의할 점은 검증입니다. AI의 설명이 항상 정확한 것은 아닙니다. 특히 복잡한 코드의 경우, AI의 설명과 실제 작동이 다를 수 있습니다. 따라서 AI의 설명을 받은 후, 자신의 이해와 맞는지 스스로 확인해야 합니다.

  AI 설명 요청 템플릿

  여기 코드가 있어: [코드 붙여넣기]. 이 부분에서 [구체적인 부분]이 이해가 안 돼. 왜 [왜?]? 나는 [현재 수준]까지만 알고 있어.

 

14.6 코드 리뷰의 기초: 위험 신호

코드 리뷰(code review)는 전문 개발자들이 항상 하는 작업입니다. 팀원의 코드를 읽고, 버그가 있는지, 개선할 점이 있는지 확인합니다. AI 시대에는 당신이 AI의 코드를 리뷰해야 합니다. 모든 코드를 완벽하게 이해할 필요는 없지만, 몇 가지 위험 신호를 알아야 합니다.

첫 번째 위험 신호는 '이상하게 복잡한 코드'입니다. 코드는 단순할수록 좋습니다. 만약 AI가 생성한 코드가 너무 복잡하면, AI에게 더 간단하게 작성해달라고 요청하세요. 코드가 길고 복잡할수록 버그가 생길 가능성이 높아집니다.

두 번째 위험 신호는 '주석이 없거나 불충분한 코드'입니다. 복잡한 로직에는 반드시 설명 주석이 있어야 합니다. AI가 생성한 코드에 주석이 없다면, 주석을 추가하도록 요청하거나 직접 추가하세요. 미래의 당신이 이 코드를 다시 읽을 때 감사할 것입니다.

세 번째 위험 신호는 '에러 처리가 없는 코드'입니다. 특히 네트워크 요청, 파일 접근, 데이터베이스 조회 등 실패할 수 있는 작업을 할 때는 반드시 에러 처리가 있어야 합니다. try-catch 문이나 .catch() 메서드가 있는지 확인하세요.

네 번째 위험 신호는 'API 키나 비밀 정보가 코드에 하드코딩되어 있는 경우'입니다. 이것은 보안 문제입니다. 절대 코드에 API 키나 비밀번호를 직접 작성하면 안 됩니다. 환경 변수(environment variable)를 사용해야 합니다.

다섯 번째 위험 신호는 '무한 루프의 가능성'입니다. while 루프나 재귀 함수를 보면, 정말 종료될 수 있는지 확인해야 합니다. 잘못된 루프는 프로그램을 멈추게 할 수 있습니다.

  코드 리뷰 체크리스트

  1) 코드가 이해할 수 있을 정도로 단순한가? 2) 중요한 부분에 주석이 있는가? 3) 실패할 수 있는 작업에 에러 처리가 있는가? 4) 비밀 정보가 노출되어 있지 않은가? 5) 무한 루프 위험이 없는가?

 

14.7 보안 기본: 절대 하면 안 되는 것들

코드를 읽을 때 꼭 확인해야 할 보안 항목들이 있습니다. 이것들은 '절대 하면 안 된다'는 규칙들입니다. 첫 번째는 '코드에 API 키나 비밀번호를 직접 입력하지 않기'입니다. 이런 정보는 .env 파일이나 환경 변수에 저장해야 합니다. AI가 생성한 코드에서 API 키를 발견했다면, 반드시 환경 변수로 변경하세요.

두 번째는 '사용자 입력을 검증하지 않고 사용하지 않기'입니다. 웹 애플리케이션에서 사용자가 입력한 데이터는 항상 위험할 수 있습니다. 데이터베이스에 저장하기 전에 반드시 검증(validation)해야 합니다. 예를 들어 이메일 입력 필드는 정말 이메일 형식인지, 비밀번호 필드는 최소 길이를 만족하는지 확인해야 합니다.

세 번째는 'SQL 인젝션 공격을 방지하기'입니다. 사용자 입력을 직접 SQL 쿼리에 사용하면 안 됩니다. 반드시 매개변수화된 쿼리(prepared statement)를 사용해야 합니다. 현대의 데이터베이스 라이브러리들은 이것을 자동으로 처리하지만, AI가 생성한 코드가 올바르게 하고 있는지 확인해야 합니다.

네 번째는 '민감한 데이터를 로그에 남기지 않기'입니다. 비밀번호, API 키, 신용카드 정보 등은 절대 로그에 기록되면 안 됩니다. 로그 파일은 보안이 취약한 경우가 많기 때문입니다. AI가 생성한 코드에서 console.log()나 logger.info()를 볼 때, 그것이 정보를 출력하는지 확인하세요.

다섯 번째는 'HTTPS 사용하기'입니다. 프로덕션 환경에서는 항상 HTTPS를 사용해야 합니다. HTTP는 데이터가 암호화되지 않아 중간에 가로챌 수 있습니다. 또한 현대의 브라우저들은 HTTP 웹사이트에 경고를 표시합니다.

여섯 번째는 '권한 확인하기(authentication & authorization)'입니다. 로그인한 사용자만 특정 기능을 사용할 수 있도록 제한해야 합니다. AI가 생성한 코드에서 현재 사용자의 권한을 확인하는 코드가 있는지 봐야 합니다.

  보안 체크리스트

  1) API 키가 환경 변수로 분리되어 있는가? 2) 사용자 입력이 검증되는가? 3) 민감한 데이터가 로그에 남지 않는가? 4) 권한 확인이 있는가? 5) HTTPS를 사용하는가?

 

14.8 이 장을 마치며

14장에서 우리는 AI가 생성한 코드를 읽고 이해하는 방법을 배웠습니다. 코드를 읽는 것은 프로그래밍의 기초 능력입니다. AI 도구가 발전했어도 이 원칙은 변하지 않습니다. 오히려 AI 시대에는 코드를 이해하는 능력이 더욱 중요해졌습니다. AI가 생성한 모든 코드를 검토할 책임이 당신에게 있기 때문입니다.

변수와 함수, 조건문 같은 기본 구조부터 시작해서, 파일 구조, 패키지 관리, 보안까지 확인해야 할 것들이 많습니다. 하지만 이것들을 한 번에 다 배울 필요는 없습니다. 지금 당신이 코드를 읽을 때 한 가지씩 확인하면서 배우면 됩니다.

다음 장에서는 코드를 읽을 때 버그를 발견하면 어떻게 해야 하는지, 즉 디버깅에 대해 배울 것입니다. 디버깅도 AI와 함께 할 수 있습니다. AI에게 올바른 정보를 제시하면, AI는 당신의 버그를 찾는 데 큰 도움이 될 것입니다.

코드를 읽고 이해하는 능력은 하루아침에 생기지 않습니다. 매일 조금씩 코드를 읽으면서 이 능력을 키워야 합니다. 처음에는 어려워 보이겠지만, 계속하면 점점 쉬워질 것입니다. 그리고 당신의 프로그래밍 실력이 눈에 띄게 향상될 것입니다. 화이팅!