AI를 사용하여 현대 웹 앱을 개발하는 방법

ChatGPT와 같은 생성적 AI는 소프트웨어 개발의 새로운 시대를 열었습니다. 코딩 기술이 거의 없거나 전혀 없는 누구나 유용하고 현대적인 애플리케이션을 개발할 수 있는 시대입니다. 이 글에서는 제가 AI를 사용하여 지금 매일 의지하고 있는 도구를 개발한 방법을 보여드리겠습니다.

내가 해결하려고 했던 문제

ChatGPT와 다른 AI 언어 모델이 시작된 이래로 특정 단어는 AI가 생성한 콘텐츠와 긴밀하게 연관 되었습니다 (작문에 ChatGPT를 사용해서는 안 되는 여러 이유 중 하나). 예를 들어 “delve”, “tapestry”, “testament”가 있습니다. 저는 작가로서 항상 적절한 맥락에 적절한 단어를 사용하는 것을 믿었습니다. 단어가 제가 전달하고자 하는 바를 정확히 표현하고 맞을 때, 저는 그 단어를 사용할 수 있어야 한다고 생각합니다.

안타깝게도, 제 고객 중 다수는 같은 방식으로 보지 않습니다. 그들은 AI가 생성한 것처럼 들릴 수 있는 콘텐츠에 대해 점점 더 조심합니다. 저는 AI가 아니기 때문에(적어도 저는 그렇게 생각하지 않습니다) AI 언어 모델에서 일반적으로 과도하게 사용되는 모든 단어와 구문을 기억하지 못하므로 피하기 어려울 수 있습니다.

그래서 저는 제공된 텍스트를 단어 목록과 비교 분석하고 잠재적으로 “AI처럼 들리는” 단어와 구문을 강조하는 도구를 만들기로 했습니다. 이와 같은 도구는 세 가지 핵심 웹 기술을 사용하여 개발할 수 있습니다. HTML(웹 페이지의 콘텐츠를 구조화), CSS(웹 페이지의 콘텐츠를 스타일링하는 데 사용), JavaScript(정적 웹 페이지를 원하는 작업을 수행하는 “웹 앱”으로 전환).

웹 앱 개발을 위한 최고의 AI 선택

” AI 어휘 검사기 ” 와 같은 프로젝트는 AI 지원 소프트웨어 개발에 완벽한 후보입니다. 최고의 AI 모델은 방대한 양의 HTML, CSS, JavaScript 코드와 문서로 훈련을 받았기 때문에 코드를 출력하고, 모범 사례에 대한 지침을 제공하고, 효율적인 구현을 제안하고, 심지어 개발 중에 발생할 수 있는 문제를 해결하는 데 도움을 줄 수 있습니다.

LMSYS Chatbot Arena Leaderboard (GPT-4o, Claude 3.5 Sonnet, Gemini Advanced) 의 상위 3개 대형 언어 모델(LLM)은 모두 인상적인 능숙도로 웹 개발 작업을 처리할 수 있습니다. 하지만 저는 궁극적으로 이 프로젝트에 Claude 3.5 Sonnet을 선택했습니다.

Claude 3.5 Sonnet은 제가 선택한 AI 코딩 어시스턴트였습니다. 그 이유는 주로 “프로젝트” 기능 덕분인데, 이 기능을 통해 앱 개발에만 전념할 수 있는 작업 공간을 만들 수 있었습니다. 물론 Sonnet이 HumanEval 벤치마크에 포함된 코딩 작업에서 경쟁사보다 더 나은 성과를 냈다는 점도 도움이 됩니다 .

클로드와 함께 웹 앱 구축하기

Claude에서 AI 어휘 검사기를 위한 새 프로젝트를 만드는 것으로 시작했습니다. 왼쪽 창에서 프로젝트 탭을 선택한 다음(활성 채팅에서 왼쪽 상단 모서리에 있는 Claude 로고 위에 마우스 커서를 올려놓으면 표시됩니다) 프로젝트 만들기 버튼을 클릭합니다.

그것이 끝나면, 나는 클로드에게 문제를 설명해야 했습니다. 내가 생각해 낸 프롬프트는 다음과 같습니다.

일반적으로, 당신은 당신이 성취하고자 하는 것에 대한 높은 수준의 설명을 제공하고 가능한 한 많은 세부 사항으로 이어가고 싶어합니다. 당신이 자세히 설명하지 않은 것은 AI가 해석하도록 남겨둘 것이고, 그것은 당신의 비전과 일치할 수도 있고 그렇지 않을 수도 있습니다.

클로드가 코드를 출력하는 데 잠시 시간이 걸렸고, 저는 Visual Studio Code를 사용하여 index.html 파일에 붙여넣었습니다. 그런 다음 웹 브라우저에서 index.html 파일을 간단히 열 수 있었고, 이것이 클로드가 생각해 낸 AI Vocab Checker 앱의 초기 버전이었습니다.

보시다시피, 클로드는 단 하나의 프롬프트로 기능적인 앱을 만들 수 있었고, 앱은 실제로 해야 할 일을 합니다! 하지만 자세히 살펴보면 꽤 분명한 몇 가지 문제가 있습니다.

• 처음 두 개의 텍스트 상자는 아래쪽 텍스트 상자보다 약간 큽니다.
• 앱 이름이 잘못되었습니다(지정하는 것을 잊었습니다).
• 해당 앱은 데스크톱 기기의 사용 가능한 수평 공간을 활용하지 않습니다.
• 모든 단어는 같은 색상으로 강조 표시되어 결과를 분석하기 어렵습니다.
• 검출된 단어에 대한 사용 통계가 없습니다.
• 클로드는 그렇게 하라는 권장에도 불구하고 어떤 라이브러리나 프레임워크도 사용하지 않았습니다.

그래서 저는 다음과 같은 프롬프트를 내렸습니다.

결과는 다음과 같습니다.

훨씬 나아졌고, 단 하나의 추가 프롬프트만 필요했습니다. Claude는 Bootstrap 프레임워크를 구현하여 현대적이고 반응성 있는 디자인을 구현했고 mark.js 라이브러리를 사용하여 더 나은 강조 표시를 구현했습니다. 이를 포함시킨 것이 앱을 개선한 방식에 감명을 받아 Claude에게 다른 프레임워크나 라이브러리를 사용할 수 있는지 물었고, AI는 Vue.js, Chart.js, Tippy.js, Natural, FileSaver.js, 그리고 몇 가지 다른 프레임워크를 제안했습니다.

제안된 프레임워크와 라이브러리 중에서 Chart.js가 가장 유용해 보였습니다. 막대 차트나 파이 차트와 같이 단어 사용 통계의 시각적 표현을 만드는 데 사용할 수 있기 때문입니다. 저는 Claude에게 구현을 요청했고, 사용자 경험을 개선하기 위해 분석할 텍스트를 결과로 대체하도록 지시했습니다. 몇 가지 사소한 조정과 디자인 조정을 거친 후, 제가 생각해 낸 것은 다음과 같습니다.

제 개인적인 요구 사항에 한해서는, 이 버전의 AI 어휘 검사기가 완벽히 충족될 수 있으며, 제가 수년간 다양한 무료 프로그래밍 웹사이트에서 습득한 매우 제한적인 웹 개발 기술을 사용하여 이를 개발하는 데 불과 15분밖에 걸리지 않았습니다.

표지 이미지와 스크린샷은 David Morelo가 촬영했습니다.