Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
Claude를 활용하여 단 하나의 프롬프트만으로 Asana 스타일의 프로젝트 관리 앱을 구축하는 방법을 안내합니다. 이 가이드는 리스트 뷰, 드래그 앤 드롭 보드, 캘린더 등 복잡한 기능을 포함하며, 별도의 빌드나 구독 없이 즉시 배포 가능한 HTML 전용 애플리케이션을 만드는 과정을 다룹니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기만약 여러분이 프로젝트 관리 청구서를 보고 '왜 우리가 결국은 열거된 작업 목록을 컬럼 사이로 드래그하는 것에 대해 좌석 단위로 비용을 지불하고 있는 걸까?'라고 의문을 가져본 적이 있다면, 이 가이드가 여러분을 위한 것입니다.
영상에서는 전체 과정이 몇 분 만에 처음부터 구축됩니다. 리스트 뷰(List view), 드래그 앤 드롭 보드(Board)를 갖춘 Asana 스타일 앱, 캘린더(Calendar), 그리고 간트 스타일 타임라인(Gantt-style Timeline)까지 포함합니다. Claude가 단 하나의 문장으로 이를 생성하고, Tiiny Host에 라이브로 배포되어 휴대폰에서 열거나 비즈니스 파트너에게 보낼 수 있는 실제 링크를 갖게 됩니다.
작성할 코드는 없고, 갱신할 구독도 없으며, 월별 청구서도 없습니다. 정확히 어떻게 했는지, 프롬프트 단어 그대로, 발생했던 버그와 수정 방법, 그리고 앱이 팀의 데이터를 실제로 저장하는 기능으로 변환되는 선택적 추가 단계까지 모두 소개합니다.
전체 구축 과정은 Claude에 입력된 하나의 프롬프트에 달려 있습니다:
"프로젝트를 관리하고 특정 캠페인과 작업을 추적하는 데 사용할 수 있는 Asana 스타일의 HTML 전용 앱을 만들어 주세요. 드래그 앤 드롭을 지원하며 Asana처럼 작동하도록 해주세요."
중요한 부분은 'HTML 전용(HTML only)'입니다. 이 지시는 Claude에게 레이아웃, 스타일링, 그리고 모든 상호작용 동작(interactive behaviour)을 단일 파일 내에 유지하라고 알려줍니다.
빌드 단계도 없고, 설치할 프레임워크도 없으며, 종속성 폴더나 설정해야 할 것도 없습니다. 하나의 파일이라는 것은 브라우저에서 즉시 열 수 있고, 한 번의 클릭으로 다운로드할 수 있으며, 어디든 드래그하여 업로드할 수 있다는 의미입니다. 영상에서 언급했듯이, HTML 전용을 선택한 전체 이유는 앱을 실행하기 쉽고 만들기도 쉽게 만들기 위함입니다.
엔터를 누르기 전에, 영상은 또한 사용 가능한 가장 강력한 모델 옵션을 선택하여 결과가 최대한 완성도 높도록 합니다. 이는 모든 '바이브 코딩(vibe coding)' 세션에 좋은 습관입니다. AI에게 코드 조각이 아닌 완전하게 작동하는 애플리케이션을 요청할 때는 접근 가능한 가장 유능한 모델을 제공하고 시간을 갖게 하는 것이 좋습니다.
Claude는 시간이 좀 걸린 후에 완전한 HTML 파일을 반환했습니다. 이를 클릭해 보니 첫인상은 강력했지만, 완벽하지 않았고 영상은 이 점에 대해 솔직하게 이야기합니다.
홈페이지의 '내 작업(My Tasks)' 섹션에는 텍스트가 겹쳐 보여서 지저분하고 약간 어수선해 보였습니다. 반면, 프로젝트(Projects) 섹션은 깔끔한 디자인이었습니다. 따라서 문제는 구조적인 것이라기보다는 홈 페이지에 국한되어 있었습니다.
다른 모든 것은 작동했습니다. '내 작업' 영역에서는 작업을 완료로 체크할 수 있었습니다. 작업을 클릭하면 Asana과 매우 흡사하게 보이는 상세 보기(detail view)가 열렸습니다. 보드 뷰(Board view)로 이동하여 드래그 앤 드롭이 요청한 대로 정확하게 작동했으며, 카드들이 컬럼 사이를 부드럽게 움직였습니다.
영상 설명에 따르면, 완성된 앱에는 목록 뷰(List view), 항목을 드래그할 때 마감일이 업데이트되는 달력(Calendar) 기능, 기한을 옮기기 위해 막대(bar)를 늘릴 수 있는 간트 스타일 타임라인(Gantt-style Timeline), 그리고 담당자, 하위 작업 및 댓글과 함께하는 작업 상세 정보가 포함됩니다.
여기서 얻을 교훈은 AI의 첫 시도는 보통 대부분의 과정을 완료시켜 주지만, 사용자가 사용하는 것처럼 테스트하는 것이 당신의 역할이라는 것입니다. 즉, 무언가를 클릭해 보고, 드래그 해보고, 체크를 해보는 것입니다. 수정(fix)은 언제나 메시지 하나만 떨어져 있습니다.
상세한 버그 리포트를 타이핑하는 대신, 영상에서는 음성 메모를 사용하여 Claude에게 피드백을 보냅니다. 메시지는 대략 다음과 같았습니다:
"모든 것이 훌륭하게 작동합니다. 유일한 문제는 앱의 홈 페이지에 있는데, '내 작업(My Tasks)' 섹션과 '프로젝트(Projects)' 영역의 텍스트가 많이 겹쳐 있고 전반적으로 정돈되지 않은 것처럼 보인다는 것입니다. 만약 홈 페이지를 깔끔하게 정리할 수 있다면 완벽할 것 같습니다."
이것이 전체 수정 사항입니다. CSS도, 요소를 검사(inspecting elements)하는 것도, 문제가 되는 줄을 찾는 것도 필요 없습니다. 무엇이 잘못되었는지 평범한 영어로 설명하고, 어디에 있는지 말해주면 Claude가 작업을 수행하게 하세요.
업데이트된 파일을 받았을 때, 홈 페이지는 깔끔하고 정돈되어 있었고, 드래그 앤 드롭도 여전히 작동했으며, 작업 항목 체크도 가능했고, 앱은 정확히 원하는 모습이었습니다.
이 단계에서 얻을 수 있는 실용적인 팁: AI에게 잘 작동하는 부분과 그렇지 않은 부분을 모두 알려주세요. "모든 것이 훌륭하게 작동합니다. 유일한 문제는..."로 시작하면 Claude가 이미 괜찮은 부분을 다시 작성하기보다 주의해야 할 한 영역에 집중하도록 유지할 수 있습니다.
이 시점에서 앱은 Claude 내부에만 존재하므로, 다른 누구도 사용할 수 없습니다. 팀원과 공유하거나 클라이언트에게 보낼 수 없습니다. 다음 단계는 'index.html'이라는 파일을 다운로드하여 Tiiny Host로 이동하는 것입니다.
영상에서는 Tiiny Host를 Google Drive와 약간 비슷하지만 기능이 더 많고 Netlify나 Cloudflare 같은 플랫폼보다 이해하기 훨씬 쉽다고 설명합니다. 과정은 정말 간단합니다:
파일 업로드. index.html 파일을 페이지로 끌어다 놓으세요. 다른 많은 호스팅 서비스는 파일 이름이 index.html이어야만 서비스를 제공합니다. Tiiny Host는 그러한 제한이 없기 때문에, Claude가 어떤 이름으로 파일을 지정하든 작동할 것입니다.
프로젝트 이름 지정. 영상에서는 'Project Tracker'라고 불립니다. 이것은 링크의 일부가 됩니다.
비밀번호 추가 (선택 사항). 이 도구가 내부용인 경우, 영상에서는 외부인이 보드에 우연히 접근하는 것을 막기 위해 비밀번호 보호 기능을 추가하며, 데모 비밀번호로 'test123'을 사용합니다. 팀 업무 추적기(task tracker)의 경우, 이것은 합리적인 기본 설정입니다.
이메일 수집 고려. Tiiny Host는 이메일 캡처 단계도 추가할 수 있게 해줍니다. 영상에서는 데모 앱을 구축하면서 동시에 메일링 리스트를 늘리고 싶은 경우에 매우 좋은 옵션이라고 언급합니다.
게시(Publish) 버튼 클릭. 사이트는 몇 초 만에 라이브되며, 실제로 발표자가 말하는 동안에도 그렇게 됩니다.
링크를 클릭하고 비밀번호를 입력하면 Asana 스타일의 앱이 공식적으로 영업을 시작합니다. 링크만 있으면 누구나 접속하여 작업을 추가하고, 카드를 이동하며, 진행 상황을 업데이트할 수 있습니다.
이 단계에서 얻게 되는 것이 무엇인지 명확히 하는 것이 좋습니다. 링크를 여는 모든 사람은 동일한 공유 작업 공간(shared workspace)에서 작업하며, 사실상 팀 전체가 하나의 계정을 사용하는 것과 같습니다.
영상에서는 이것만으로도 구독 비용을 많이 절약할 수 있다고 지적합니다. 왜냐하면 더 이상 일반 목적의 프로젝트 추적기(project tracker)에 대해 사람당 비용을 지불하지 않기 때문입니다. 소규모 팀이나 단일 프로젝트의 경우, 이와 같은 공유 보드(shared board)가 필요한 경우가 많습니다.
특정 사용자에게 작업을 할당하고 알림을 보내려면, 영상에서 언급했듯이 프롬프트 하나만 추가하면 쉽게 구현할 수 있는 기능입니다. 더 나아가 자체 데이터베이스와 적절한 로그인 시스템까지 구축하고 싶다면, 그에 대한 권장 경로도 있습니다.
작업 내용을 제대로 기억하고 사용자 계정을 지원하는 도구를 만들려면, 영상에서는 Supabase를 추천합니다. Supabase는 단일 계정으로 데이터베이스, 인증(authentication), API, 서버리스 함수(serverless functions), 파일 스토리지(file storage)를 제공합니다. 따라야 할 단계는 다음과 같습니다:
영상에서는 이 모든 것이 몇 분 만에 가능하며, 이전과 동일한 패턴이라고 강조합니다. 즉, 관련 세부 정보를 Claude에게 전달하고, 필요한 것을 생성하도록 맡긴 다음, 그 결과물을 제자리에 배치하는 것입니다.
이러한 프로젝트에 적용할 만한 몇 가지 사항:
잘 작성된 프롬프트 하나와 몇 분간의 테스트만으로, 이 영상은 완전히 작동하는 Asana 스타일 프로젝트 관리자(목록 보기, 보드 보기, 달력 보기 및 타임라인 보기, 담당자, 하위 작업 및 댓글이 포함된 작업 세부 정보, 예상대로 작동하는 드래그 앤 드롭 기능, 그리고 팀의 누구나 열 수 있는 실제 비밀번호 보호 링크)를 보여주며 마무리됩니다.
HTML 전용 접근 방식(HTML-only approach) 덕분에 전체 시스템이 매우 이식성이 뛰어나며, Tiiny Host는 컴퓨터 파일을 실제로 공유할 수 있는 무언가로 바꿔줍니다.
지속성(persistence)과 로그인 기능이 필요하다면 Supabase를 몇 개의 프롬프트만으로 통합할 수 있습니다. 코드를 한 줄도 작성해 본 적이 없는 사람부터, 직접 소유할 수 있는 작업 보드에 대해 좌석당 비용을 지불하는 것에 지친 사람까지, 이것은 '이런 것이 있으면 좋겠다'라는 생각이 매일 사용하는 무언가가 되는 과정을 명확하게 보여줍니다.
