학습과 개발과 코딩이 섞이는 개발 방식의 진화
프로젝트 데이비드: 다시 개발을 시작하다
지금까지 흐름을 보면 v0가 짠 코드도 있고, 커서를 통해 짠 코드도 있습니다.
불필요한 파일 정리를 해 주세요
이들 사이의 일관성을 맞추는 일은 한 적이 없습니다. 이제 정리를 좀 해야겠습니다. 촌스럽게(?) 커서에서 이런 추상적인 명령을 던질 수 있다는 점에 놀랍니다.
불필요한 파일 정리를 해 주세요.
놀랍게도 <프로그래밍이 정말 빠르게 변하고 있습니다>를 쓰던 시점의 커서에서는 기대하기 어려운 명령이었습니다.
지금 쓰지 않는 app/index.tsx를 지우고, 그걸 테스트하던 index.test.tsx는 새 홈 화면((tabs)/index.tsx)을 검사하는 테스트로 바꿔서 정리할게요. 그렇게 하면 불필요한 파일은 없어지고, npm test도 계속 통과합니다.
커서 말 대로 테스트도 잘 통과합니다.
클로드 선생님을 따라 전체 구조 한눈에 보기
하지만, 아직 저는 화면만 확인했을 뿐, 코드 내용은 모릅니다. 테스트 코드에 대해서도 마찬가지고요. 대부분 블랙박스 상태로 작업한 것이죠. 열어 보니 index.tsx 코드는 꽤나 길었습니다. <클로드는 훌륭한 프로그래밍 과외 선생님>이란 점에 기대를 걸고 다시 설명을 요구해 볼까요?
파일을 첨부하며 클로드에게 이렇게 요청했습니다.[1]
첨부한 코드를 TypeScript와 React를 잘 모르는 웹 개발자 대상으로 쉽게 설명해 주세요.
일단, 클로드가 보여준 설명을 쭉 봅니다. 클로드 말처럼 '전체 구조 한눈에 보기'를 하는 거죠. 'HTML/CSS로 비유하면'이라는 설명 방식은 마음에 듭니다.
그리고 날짜 포맷 함수는 직관적입니다.
클로드가 요약하여 추상화하여 전달하는 내용
클로드가 컴포넌트 본문이라 명명한 부분이 과거 프로그래밍 경험에 빗대면 main이나 index에 해당하는 곳으로 보입니다.
코드 라인 수를 보려고 커서를 잠시 열어 보니 접었다 폈다 하며 볼 수 있는 컴포넌트에 대한 정의가 묶여 있는 구간인 듯합니다. 그런 점에서 '컴포넌트 본문'이라는 요약한 작명도 괜찮네요.
여기서 과거의 습관은 저에게 한 줄 한 줄 다 파악하라고 요구하지만, 또 과거 습관을 버리고[2] 클로드를 설명을 다 보기로 합니다. 그렇게 보니 또 HTML/CSS에 대응시켜 보여주는 방식이 마음에 듭니다.
React와 Tailwind 문법에 대해서는 그것을 쓴다는 정도만 이해하고 지금은 익히지 않기로 합니다.
묻따풀을 위해서는 질문을 던져야 합니다
내용을 훑는다고 해서 따라가기만 하면 마치 수업 듣다가 조는 학생처럼 될 수 있다고 생각합니다. 그래서 이렇게 물었습니다.
HomeScreen 함수의 이름은 고정된 건가요? 관례인가요? 아니면 어딘가 정의되어서 호출된 것인가요?
클로드는 두괄식으로 답을 하네요.
결론: 자유롭게 바꿀 수 있는 이름입니다. <중략> 핵심은 파일 맨 끝의 export default입니다.
학습과 개발과 코딩이 섞이는 개발 방식의 진화
이어서 클로드는 유용한 설명을 보면서
개발과 학습이 동시에 벌어질 수 있는 이런 방식이 20년 전 제가 개발을 배울 때와 가장 큰 차이점이 아닌가 싶습니다. 그때는 문법부터 배우고 API를 익히는 식의 단계가 일반적이었는데, 지금은 그렇게 할 수가 없을 듯한 분위기입니다.
마치 애자일에 익숙해지면 분석-설계-개발을 나누어서 하던 방식이 너무나 큰 낭비로 보이는 것과 같은 느낌이랄까요?
낯선 프로그래밍 개념을 두 선생님에게 함께 묻다
한편, 프로젝트 데이비드라 명명한 이 프로젝트는 <언러닝> 프로젝트이기도 합니다. 아주 오랫동안 익숙해진 방법을 버리고, 새로운 방법을 익히는 <언러닝> 과정이기도 하니까요.
인공지능이 짠 코드에 익숙해지기로 합니다. 시간의 힘을 믿고 완벽하게 알기보다는 낯선 부분에 대해서만 질문을 던지고 조금씩 알아가기로 합니다. 먼저 LinearGradient가 눈에 띄는데, 직관적으로 추측이 되지는 않아서 클로드와 제미나이에게 한꺼번에 물었습니다.
낯선 지식에 대해 물을 때는 둘 모두에 묻고 답을 듣는 것이 유용해 보입니다. 표현 방식에 따라 둘 다 장점이 있어서 이를 종합해서 보면 이득인 듯합니다.
이 경우에는 제미나이가 '배경을 입히는 캔버스' 같은 식으로 비유적으로 개념 설명을 했는데, 용도를 직관적으로 파악하기에 좋았습니다. 인공지능의 설명은 확실히 사람과 유사한 면이 있어서, 과외 선생님 같기도 하고 페어 프로그래밍 느낌도 줍니다. 가끔은 파트너나 선생님을 바꾸는 것이 안 보이던 관점을 보게 해 줄 수도 있겠죠.
잠깐 잊고 있던 코딩 도우미 커서의 지원
또, 어떤 질문을 할까 보다가 deprecated 된 코드가 보여서 커서에게 이렇게 요구했습니다.
deprecated 된 컴포넌트를 쓰는 부분을 같은 효과를 내는 코드로 수정해 줄 수 있나요?
커서에 대한 신뢰가 계속 높아지는군요. 다섯 개의 파일을 수정한 후에 변경 내용을 깔끔하게 보여주더니 npm test도 모두 통과했다고 말합니다. 혹시나 해서 터미널에서 테스트를 실행했는데, 커서 말이 맞습니다.
복합적인 프로그래밍 문제에 탁월한 인공지능의 설명
복합적인 내용을 다룰 때는 프로그래밍 전문 서적의 설명에 비해 클로드에 의존하는 방식이 훨씬 효과적일 듯합니다. SafeAreaView에 대해 두 인공지능에게 물은 결과 내용은 비슷한데, 클로드가 그림으로 설명해서 눈길이 더 갑니다. 왜 필요한지를 설명할 때 그림으로 예를 드는 모습을 보면서...
제가 질문한 내용이 다양한 사이즈를 가진 기기로 보는 웹 화면을 다루는 맥락에서 만들어진 컴포넌트임을 떠올립니다. 프로그래밍 요소는 다양한 층위의 여러 가지 문제가 엉켜 있는 경우가 많습니다. 이때, 어떤 관정에서 초점을 어디에 두고 설명하는지에 따라 매우 다른 내용을 전해야 합니다.
이럴 때 전문서는 해당 기술의 관점에서만 설명을 하는데 인공지능은 사람처럼 '말을 쓰는 자아(Linguistic Self)'로 작동하기 때문에 훨씬 더 효과적이란 점을 재확인할 수 있습니다.
개인 정보를 다 알고 있음을 드러내는 구글
대체로 클로드가 나았는데, FontAwesome6에 대한 설명은 제미나이가 좋았습니다. 그런데, 여기서 살짝 공포를 느끼는 장면이 있었습니다. 사용법 예시 코드에서 우리 가족의 이름이 등장했습니다. 제가 가족들의 이름을 입력한 일이 없는데, 말이죠. 구글을 비롯한 빅테크가 이미 우리의 데이터를 몽땅 가져다 쓴다고 짐작하고는 있었지만 이렇게 명백하게 확인하게 되니 찜찜한 기분을 느낄 수밖에 없습니다.
주석
[1] 제미나이(무료)와 퍼플렉시티에게도 똑같이 요구했는데, 이번에도 클로드의 설명이 가장 우수합니다. 제미나이 설명도 나쁘지 않습니다. 하지만, 근소한 차이로 클로드 설명을 채택했습니다.
[2] <언러닝> 장면이라고 스스로 장려합니다.