목록으로
생활 속 AI 활용
공모전 일정 알리미 웹앱 제작
👤 빠른부엉이787 📅 2026-07-19 👁 조회 34
AI를 활용해 공모전 일정을 한눈에 관리하는 ‘공모전알리미’ 웹앱을 직접 제작한 사례
① 어떤 상황에서 AI를 활용했나요?
글쓰기가 취미라 글쓰기 공모전에 글을 투고하고 싶은데, 참여할 공모전이 여러 개라 일정 알림 앱이 있었으면 했습니다. 그래서 AI를 활용하여 참여하고자 하는 공모전 정보를 기록하고, 여러 공모전 일정을 한눈에 볼 수 있는 웹앱을 만들었습니다.

② 어떤 AI를 어떻게 활용했나요?
클로드 AI 무료 버전을 활용하였습니다. 먼저 프롬프트에 제가 만들고 싶은 웹앱의 이름, 페이지 구성, 기능을 적어, 웹앱 제작에 적합한 도구를 추천해달라고 입력하였습니다. 그 결과, PWA + 기초 React 코딩 방식을 택하게 되었고, vercel을 통해 배포하는 방식으로 웹앱을 제작하게 되었습니다. 기초 코딩지식을 활용하여 Visual Studio Code에 클로드가 알려주는 코드를 입력하면서 웹앱을 제작하고, git에 커밋한 후에 vercel로 배포하여 초기 버전을 완성하였습니다. 이후 원하는 디자인 방향을 클로드에 요청하여 웹앱 디자인 개선 및 제작을 완료하였습니다.

③ 활용 결과 어떤 변화가 있었나요?
예전엔 공모전 링크를 모바일 브라우저에 즐겨찾기 하는 방식으로 일정을 숙지하다 보니 매번 마감일을 놓치곤 했습니다. 이번에 AI를 활용하여 공모전알리미 웹앱을 만들고 일상에서 사용하니 편리하게 공모전 일정을 확인할 수 있었습니다. 특히 D-day 기능을 추가하여 공모전마다 마감일까지 남은 일수를 메인페이지에 표시되게 하여 공모전 마감일을 놓치는 일을 방지할 수 있었습니다.

④ 나만의 방식 또는 개선 포인트는 무엇인가요?
클로드에 프롬프트를 입력할 때, 한꺼번에 ‘~웹앱을 만들어줘’라고 입력하지 않고 먼저 개발도구를 추천받은 다음에 그 도구로 만들 때의 단계를 알려달라고 했습니다. 단계별로 제작하다 보니 중간에 오류가 생기면 바로 AI한테 질문하여 수정할 수 있었고, 파일 및 코드 구조도 쉽게 파악하여 향후 기능 추가 시에도 쉽게 코드를 수정할 수 있었습니다.

⑤ 다른 사람도 따라 할 수 있나요?
약간의 코딩지식과 git에 커밋하는 원리 정도만 알고 있으면 따라 할 수 있습니다. 클로드에게 바로 웹앱을 만들어달라고 하지 않고, 클로드가 알려주는 파일별 코드를 Visual Studio Code에 입력하는 방식으로 제작하였기 때문에 약간의 코딩 지식이 필요합니다. 그리고 git에 커밋 후 vercel에 배포하는 방식으로 진행하였으므로 git이 어떤 건지 정도는 알고 있으면 좋습니다. 나머지는 AI가 알려주는 대로 따라 하면 되기 때문에 다른 사람들도 무난하게 제작할 수 있을 것입니다.

← 목록