코딩을 몰라도 AI와 함께 웹앱을 만들 수 있을까? — 마을기록을 위한 AI 기록 웹앱 제작 도전기

1. AI와 함께하는 마을기록 웹앱 제작

사라져가는 마을의 기억을 주민들의 이야기로 남기고 싶었습니다.

서울 OO동에는 오랜 시간 그곳에서 살아온 주민들의 삶과 추억이 곳곳에 남아 있습니다.

누군가에게는 매일 지나던 골목이고, 누군가에게는 아이를 키우며 오가던 길이며, 또 다른 누군가에게는 이웃과 정을 나누던 장소입니다.

그러나 재개발로 마을의 모습이 달라지면 우리가 기억하던 장소와 풍경도 사라질 수 있습니다.

저는 이러한 마을의 기억을 주민들이 직접 기록하는 「OO곳곳 : 마을기록」수업을 진행하고 있습니다.

이 수업은 주민들이 스마트폰으로 마을을 촬영하고, 사진에 담긴 추억을 글로 남기며, 각자의 기록을 모아 하나의 마을 이야기로 완성하는 과정입니다.

그런데 수업을 준비하면서 한 가지 고민이 생겼습니다.

"사진은 쉽게 찍을 수 있지만, 그 사진에 담긴 이야기를 글로 쓰는 것은 왜 이렇게 어려울까?"

마을기록에 참여하는 주민들이 모두 글쓰기에 익숙한 것은 아닙니다. 사진을 보며 이야기를 나누는 것은 자연스럽지만, 막상 글을 쓰려고 하면 첫 문장부터 어려움을 느끼기도 합니다.

그래서 AI를 활용하면 이러한 어려움을 줄일 수 있겠다고 생각했습니다.

제가 시도하고자 했던 것은 세 가지였습니다.

첫째, 글쓰기에 익숙하지 않은 주민도 자신의 이야기를 쉽게 기록할 수 있도록 돕는 것

사진을 올리고 짧은 메모를 작성하면 AI가 질문을 던지고, 주민이 답변하는 과정에서 자연스럽게 하나의 글이 완성되도록 하고 싶었습니다.

둘째, 여러 주민이 각자의 기록을 독립적으로 작성할 수 있는 웹앱을 만드는 것

특별한 프로그램을 설치하거나 복잡한 회원가입 절차를 거치지 않고, 카카오톡으로 전달받은 링크를 누르기만 하면 사용할 수 있는 도구가 필요했습니다.

셋째, 작성한 기록을 보관하고 실제 책자 제작에 활용할 수 있도록 하는 것

마을기록은 한 번 작성하고 끝나는 글이 아닙니다. 수업이 끝난 뒤에도 다시 읽고 수정하거나, 여러 편을 모아 책자로 만들 수 있어야 합니다.

이러한 목적을 가지고 ChatGPT와 함께 마을기록 웹앱 제작에 도전했습니다.

제가 원했던 것은 AI가 주민의 이야기를 대신 만들어내는 도구가 아니라, 주민의 기억을 질문으로 끌어내고 글로 정리해 주는 AI 글쓰기 동반자였습니다.

2. 웹앱 제작 과정과 도구 활용

① ChatGPT와 대화하며 웹앱의 기능을 기획하다

처음부터 복잡한 프로그램을 만들려고 한 것은 아니었습니다.

제가 필요한 기능을 일상적인 언어로 ChatGPT에 설명하고, 대화를 통해 하나씩 구체화했습니다.

가장 중요하게 생각한 기능은 다음과 같았습니다.

스마트폰에서 쉽게 접속할 수 있는 웹앱

사진을 업로드하고 간단한 메모를 입력하는 기능

AI가 질문을 통해 사진 속 기억을 구체화하도록 돕는 기능

질문과 답변을 바탕으로 자연스러운 마을기록 글을 작성하는 기능

한 사람이 최대 10편의 기록을 작성하고 관리하는 기능

작성한 글을 수정하고 다시 확인하는 기능

완성된 글을 Word와 PDF로 저장하는 기능

이 과정에서 ChatGPT는 단순히 글을 작성해 주는 역할을 넘어, 제가 구상한 수업 활동을 실제 웹앱의 기능으로 바꾸는 데 도움을 주었습니다.

② 프롬프트로 웹앱 제작을 요청하다

다음은 당시 제작 요구사항을 바탕으로 재구성한 핵심 프롬프트입니다.

프롬프트 1. 마을기록 웹앱 기획 및 제작

「OO곳곳 : 마을기록」 수업에서 주민들이 사용할 웹앱을 만들어줘.

이 수업은 재개발을 앞둔 OO동의 장소와 사람, 생활과 추억을 기록하는 활동이야.

참여자들이 스마트폰으로 촬영한 사진을 업로드하고 사진에 대한 간단한 메모를 입력하면, AI가 인터뷰하듯 질문을 던져 이야기를 구체화할 수 있도록 해줘.

참여자가 답변한 내용을 바탕으로 자연스럽고 따뜻한 마을기록 글을 작성하도록 만들어줘.

한 사람당 최대 10편의 글을 작성할 수 있도록 하고, 각각의 글을 수정하거나 관리할 수 있게 해줘.

특히 디지털 도구에 익숙하지 않은 주민도 쉽게 사용할 수 있도록 화면을 직관적으로 만들어줘.

완성한 기록은 Word와 PDF로 저장하여 책자 제작에 활용할 수 있도록 해줘.

이 프롬프트에서 중요했던 것은 단순히 '웹앱을 만들어줘'라고 요청하지 않았다는 점입니다.

누가 사용하는지, 어떤 상황에서 사용하는지, 어떤 과정을 거쳐 어떤 결과물을 만들어야 하는지를 구체적으로 설명했습니다.

AI에게 기능만 나열하는 것이 아니라 수업의 목적과 사용자의 특성을 알려주는 것이 중요하다는 사실을 알게 되었습니다.

③ AI 인터뷰 방식으로 글쓰기를 설계하다

웹앱에서 가장 중요하게 생각한 부분은 AI와의 인터뷰였습니다.

예를 들어 주민이 오래된 골목 사진을 올리고 다음과 같이 메모했다고 가정해 보겠습니다.

"어릴 때 친구들과 놀던 골목. 지금은 많이 변했다."

이 짧은 메모만으로는 마을기록에 필요한 이야기가 충분히 드러나지 않습니다.

AI가 다음과 같은 질문을 던지도록 구상했습니다.

이 골목에서 가장 기억에 남는 일은 무엇인가요?

그때는 누구와 함께 이곳을 다녔나요?

지금의 모습과 예전의 모습은 어떻게 달라졌나요?

이 장소가 사라진다면 가장 아쉬운 것은 무엇인가요?

다음 세대에게 이곳을 어떻게 기억해 달라고 말하고 싶으신가요?

주민이 이러한 질문에 답하면, AI는 그 내용을 바탕으로 한 편의 기록문을 정리하는 것입니다.

프롬프트 2. AI 인터뷰와 글쓰기

너는 마을기록을 돕는 따뜻하고 친절한 인터뷰어야.

사용자가 업로드한 사진과 간단한 메모를 바탕으로, 그 장소에 얽힌 경험과 기억을 구체적으로 떠올릴 수 있도록 질문해 줘.

질문은 한 번에 너무 많이 하지 말고, 사용자가 쉽게 대답할 수 있도록 일상적인 말로 작성해 줘.

답변을 바탕으로 시간, 장소, 사람, 사건, 감정이 자연스럽게 드러나는 마을기록 글을 완성해 줘.

단, 사용자가 말하지 않은 사실이나 경험을 임의로 만들어내지 마.

글은 주민의 말투와 감정을 최대한 살리되, 읽기 편한 문장으로 정리해 줘.

마지막에는 사용자가 직접 내용을 확인하고 수정할 수 있도록 해줘.

이렇게 설계한 이유는 마을기록에서 가장 중요한 것이 화려한 문장이 아니라 실제로 그곳에서 살아온 사람의 경험과 목소리이기 때문입니다.

AI가 새로운 이야기를 만들어내는 것이 아니라, 주민이 가지고 있는 이야기를 발견하도록 돕는 역할을 하기를 바랐습니다.

④ Netlify를 활용해 웹앱을 공개하다

ChatGPT와 함께 웹앱 제작을 진행한 다음에는 주민들이 실제로 접속할 수 있도록 공개하는 과정이 필요했습니다.

이때 활용한 서비스가 Netlify입니다.

Netlify는 웹사이트를 인터넷에 공개할 수 있도록 도와주는 배포 서비스입니다.

완성한 웹앱을 Netlify에 배포하고, 공개된 주소를 활용해 참여자들이 스마트폰으로 접속할 수 있도록 했습니다.

주소를 카카오톡으로 전달하고 QR코드도 만들어, 주민들이 복잡한 주소를 입력하지 않고 접속할 수 있도록 했습니다.

제가 중요하게 생각한 것은 기술적으로 복잡한 기능보다 실제 수업 현장에서 쉽게 사용할 수 있는 접근성이었습니다.

특히 참여자들이 카카오톡에서 링크를 눌러 접속한다는 점을 고려해 사용 환경을 점검했습니다.

⑤ 실제 사용 과정에서 가장 큰 문제를 발견하다

웹앱을 제작하고 실제로 사용하면서 예상하지 못한 문제가 발생했습니다.

주민들이 웹앱에서 각자의 글을 작성한 후 사이트를 벗어났다가 다시 접속했는데, 이전에 작성했던 기록이 복원되지 않는 문제가 생긴 것입니다.

열심히 작성한 글을 다시 확인할 수 없다는 사실은 매우 당황스러웠습니다.

이 문제를 겪으며 웹앱에서 글을 작성할 수 있다는 것과, 작성한 내용을 안전하게 보관할 수 있다는 것은 전혀 다른 문제라는 사실을 알게 되었습니다.

특히 카카오톡 내부 브라우저를 통해 접속하는 환경에서는 브라우저의 저장 방식과 재접속 조건을 더 신중하게 고려해야 했습니다.

그래서 ChatGPT에 다시 수정을 요청했습니다.

프롬프트 3. 재접속 시 기록 복원 문제 해결

현재 웹앱에서 주민들이 각자의 글을 작성한 후 사이트를 벗어났다가 다시 접속하면 이전에 작성한 기록이 보이지 않는 문제가 발생했어.

실제로 작성한 글을 잃어버리는 일이 생겼기 때문에 이 문제를 해결해야 해.

주민들은 주로 카카오톡에서 공유한 링크를 눌러 웹앱에 접속해.

이러한 사용 환경을 고려해서 작성 중인 글이 사라지지 않도록 저장 기능을 보완해 줘.

재접속했을 때 이전에 작성한 글을 다시 확인하고 수정할 수 있도록 개선해 줘.

특히 참여자마다 자신의 기록을 관리할 수 있도록 하고, 글을 안전하게 보관할 수 있는 방법도 마련해 줘.

이 과정을 통해 브라우저 내부에 데이터를 저장하는 방식과 별도의 서버나 데이터베이스에 저장하는 방식이 다르다는 점을 이해하게 되었습니다.

또한 저장 기능을 만들었다고 해서 모든 기기와 브라우저에서 데이터가 안전하게 복원되는 것은 아니라는 사실도 배웠습니다.

⑥ JSON 대신 PDF와 Word 저장 기능을 요청하다

기록을 보관하는 방법을 고민하면서 JSON 파일을 활용하는 방법도 검토했습니다.

하지만 실제 참여자들이 사용하기에는 문제가 있었습니다.

JSON은 데이터를 보관하기 위한 파일 형식으로는 유용하지만, 일반 사용자에게 익숙하지 않았습니다. 특히 스마트폰 기종이나 카카오톡 접속 환경에 따라 파일 다운로드가 어려운 경우도 있었습니다.

그래서 주민들이 익숙하게 사용할 수 있는 방식으로 변경하기로 했습니다.

프롬프트 4. PDF와 Word 다운로드 기능 개선

JSON 파일은 주민들이 사용하기에 너무 어려운 것 같아.

스마트폰 기기에 따라 다운로드가 잘되지 않는 문제도 있어.

JSON 파일 대신 작성한 마을기록을 PDF 파일과 Word 파일 두 가지 형식으로 저장할 수 있도록 바꿔줘.

주민들이 각자 작성한 글을 개별적으로 저장할 수도 있고, 여러 편을 한 번에 저장할 수도 있도록 해줘.

사진과 글이 함께 들어가도록 하고, Word 파일은 나중에 수정할 수 있도록 만들어줘.

PDF 파일은 스마트폰에서도 쉽게 저장할 수 있도록 해줘.

카카오톡에서 링크를 눌러 접속하는 환경도 고려해서 최대한 사용하기 쉽게 만들어줘.

이후 수정한 버전에서는 JSON 중심의 백업 방식 대신 사진과 글을 PDF 또는 Word 문서로 내보내는 방식을 마련했습니다.

PDF는 인쇄 화면에서 'PDF로 저장'하는 방식으로, Word는 수정 가능한 문서 형식으로 활용하도록 구성했습니다.

여기서 한 가지 중요한 점이 있습니다.

PDF와 Word로 저장하는 것은 기록을 파일로 보관하는 기능이지, 웹앱에 재접속했을 때 작성 중이던 글을 자동으로 복원하는 기능과는 다릅니다.

따라서 파일 저장과 재접속 복원은 별도로 확인해야 하는 기능이라는 것을 알게 되었습니다.

3.결과와 배운 점

① 코딩 지식보다 중요한 것은 문제를 구체적으로 설명하는 능력이었습니다.

이번 작업을 통해 가장 크게 느낀 점은 전문적인 개발 지식이 충분하지 않더라도 AI와 대화하면서 필요한 웹앱을 만들어 갈 수 있다는 것입니다.

물론 모든 과정이 한 번에 해결되지는 않았습니다.

하지만 어떤 문제가 있는지, 어떤 기능이 필요한지, 사용자가 어떤 상황에서 어려움을 겪는지를 구체적으로 설명하면 AI와 함께 해결 방법을 찾아갈 수 있었습니다.

저는 코드를 직접 작성하는 것보다 수업의 목적을 정하고, 참여자의 입장에서 필요한 기능을 판단하고, 실제로 사용해 보면서 문제점을 발견하는 역할에 집중했습니다.

② 웹앱을 만드는 것보다 실제 사용 환경에서 작동하게 하는 것이 더 어려웠습니다.

처음에는 웹앱을 완성하고 인터넷에 공개하면 작업이 끝났다고 생각했습니다.

하지만 실제로 주민들이 사용하면서 예상하지 못한 문제가 나타났습니다.

가장 큰 시행착오는 재접속 시 기록이 복원되지 않았던 일이었습니다.

이 경험을 통해 프로그램이 처음 실행될 때 잘 작동하는 것과 실제 사용자가 반복해서 이용할 때 안정적으로 작동하는 것은 다르다는 사실을 배웠습니다.

특히 중요한 기록을 다루는 웹앱이라면 기능의 다양성보다 데이터 보관과 복원이 우선되어야 한다는 점을 절실하게 느꼈습니다.

③ 사용자에게 익숙한 기술이 좋은 기술이었습니다.

개발 관점에서 편리한 기능이 실제 사용자에게도 편리한 것은 아니었습니다.

대표적인 사례가 JSON 파일 저장이었습니다.

처음에는 데이터를 저장할 수 있다는 사실 자체가 중요하다고 생각했습니다.

하지만 주민들이 파일을 다운로드하거나 다시 사용하는 과정에서 어려움을 겪을 수 있다는 것을 알게 되었습니다.

결국 PDF와 Word처럼 익숙한 파일 형식으로 변경하는 것이 실제 수업에서 더 적합하다고 판단했습니다.

이번 경험을 통해 좋은 디지털 도구는 기능이 많은 도구가 아니라, 사용자가 별도의 설명 없이도 자신의 목적을 이룰 수 있는 도구라는 점을 배웠습니다.

④ AI는 사람의 기억을 대신하는 것이 아니라 기억을 꺼내는 질문자가 되어야 합니다.

마을기록은 단순한 글쓰기 활동이 아닙니다.

한 사람의 경험을 통해 지역의 역사와 문화를 남기는 활동입니다.

따라서 AI가 그럴듯한 이야기를 만들어내는 것보다 주민이 자신의 기억을 충분히 이야기하도록 돕는 과정이 중요합니다.

저는 AI가 글을 완성하는 능력뿐 아니라 적절한 질문을 던지는 능력에도 주목하게 되었습니다.

사진 한 장에서 시작한 이야기가 장소와 사람, 사건과 감정으로 확장되는 과정을 통해 AI가 기록 활동의 좋은 동반자가 될 수 있겠다고 생각했습니다.

4.나만의 꿀팁

이번 웹앱 제작을 경험하면서 얻은 팁을 정리해 보았습니다.

첫 번째, 웹앱을 만들기 전에 실제 사용자를 구체적으로 정하세요.

어떤 연령대가 사용하는지, 스마트폰으로 접속하는지, 어떤 결과물이 필요한지에 따라 웹앱의 구성이 달라집니다.

두 번째, 프롬프트에는 사용 상황까지 설명하세요.

'글쓰기 웹앱을 만들어줘'보다 '마을기록 수업에서 주민들이 카카오톡 링크로 접속해 사진과 메모를 바탕으로 글을 작성하는 웹앱을 만들어줘'라는 요청이 훨씬 구체적입니다.

세 번째, 처음부터 모든 기능을 만들려고 하지 마세요.

사진 입력, 메모 작성, 글 생성, 저장처럼 핵심 기능부터 만들고 실제 사용하면서 필요한 기능을 추가하는 것이 좋습니다.

네 번째, 저장과 복원 기능을 가장 먼저 시험하세요.

글을 작성한 다음 페이지를 닫고 다시 접속해 보세요. 같은 기기뿐 아니라 다른 브라우저에서도 확인하는 것이 좋습니다.

다섯 번째, AI가 만든 글은 반드시 사람이 확인하도록 하세요.

특히 마을기록에서는 실제 경험과 사실이 중요합니다. AI가 작성한 글에 사용자가 이야기하지 않은 내용이 포함되지 않았는지 확인해야 합니다.

여섯 번째, 완성한 글은 별도의 파일로도 보관하세요.

웹앱의 저장 기능만 믿지 않고 PDF나 Word 파일로 기록을 남기면, 이후 편집과 책자 제작에도 활용할 수 있습니다.

5. 앞으로의 계획과 도움이 필요한 부분

이번 작업은 AI를 활용해 교육 현장에 필요한 도구를 직접 만들어 본 의미 있는 경험이었습니다.

하지만 앞으로 개선하고 싶은 부분도 있습니다.

가장 먼저 해결하고 싶은 것은 기록의 안정적인 저장과 복원입니다.

현재의 파일 다운로드 방식에 더해, 사용자가 다른 날 다시 접속하거나 기기를 바꾸더라도 이전 기록을 안전하게 이어서 작성할 수 있는 구조를 마련하고 싶습니다.

이를 위해 사용자별 계정과 데이터베이스를 활용하는 방식도 검토하고자 합니다.

또한 다음과 같은 기능도 추가하고 싶습니다.

사진과 글을 보기 좋게 배치해 한 편의 기록 페이지로 만드는 기능

여러 편의 기록을 하나의 책자로 편집하는 기능

음성으로 이야기하면 글로 변환해 주는 기능

기록의 시간과 장소를 연결해 마을기록 지도로 만드는 기능

주민의 개인정보와 기록을 안전하게 관리하는 기능

특히 도움이 필요한 부분은 서버와 데이터베이스를 이용한 안전한 저장 구조, 그리고 스마트폰과 카카오톡 환경에서도 안정적으로 작동하는 웹앱 구현 방법입니다.

앞으로는 「OO곳곳 : 마을기록」에서 얻은 경험을 바탕으로 다른 지역의 마을기록 수업이나 시니어 자서전 쓰기 수업에도 적용할 수 있는 기록 도구로 발전시켜 보고 싶습니다.

마치며

이번 프로젝트에서 가장 의미 있었던 것은 웹앱을 하나 만들었다는 사실만은 아닙니다.

수업 현장에서 발견한 작은 불편함을 AI와의 대화를 통해 실제 도구로 바꾸어 볼 수 있었다는 점입니다.

사진은 있지만 글쓰기가 어려운 사람, 이야기는 많지만 어디서부터 시작해야 할지 모르는 사람도 자신의 기억을 기록할 수 있도록 돕고 싶었습니다.

그 과정에서 기술적인 문제도 겪었고, 소중한 기록이 사라지는 안타까운 경험도 했습니다.

그러나 이러한 시행착오를 통해 AI 활용에서 중요한 것은 단순히 결과물을 빠르게 만드는 것이 아니라, 실제 사용자의 문제를 끝까지 해결해 나가는 과정이라는 점을 배웠습니다.

마을의 모습은 변할 수 있지만, 그곳에서 살아온 사람들의 이야기는 기록으로 남길 수 있습니다.

AI가 그 기억을 지키는 데 작은 도움을 줄 수 있다면, 그것만으로도 충분히 의미 있는 시도라고 생각합니다.