목록으로
교육·학습을 위한 AI 활용
흩어진 인천의 옛 사진을 한 공간으로, AI와 만든 기록 박물관 TIMEPORTAL
여러 기관에 흩어진 인천의 기록을 실제로 수집·검증하고, 준비된 전시에서 사진과 출처를 함께 관람하는 몰입형 웹 박물관을 만들었습니다.
🤖 활용 AI 도구
ChatGPT/Codex
1. 어떤 상황에서 AI를 활용했나요?
익숙한 동네의 예전 모습이 궁금해도, 기록은 한곳에 모여 있지 않았습니다. 사진은 경관 아카이브에, 유산 자료는 다른 기관에, 학교와 생활의 기록은 또 다른 곳에 있었습니다. 기관마다 검색 방법과 자료 형식, 사진을 여는 방식이 달랐고, 자료를 찾은 뒤에도 어느 장소의 무엇을 찍은 사진인지 다시 확인해야 했습니다.
제가 만들고 싶었던 것은 인천의 기록을 사진과 출처까지 연결해 한 공간에서 관람하는 박물관이었습니다. 특정 관광지 한 곳에 한정하지 않고 인천 전역을 대상으로 하되, 확보한 자료의 범위는 솔직하게 보여주고 싶었습니다. 자료 수집부터 재사용할 데이터와 관람 화면까지 함께 만들어야 했기에 AI를 개발 파트너로 활용했습니다.
2. 어떤 AI를 어떻게 활용했나요?
ChatGPT로 초안을 작성하고 실제 개발은 Codex에 원하는 흐름과 제약을 설명하고, 자료원 조사와 수집기, 데이터 정리, 웹 전시 구현을 진행했습니다.
수집은 작은 계획부터 시작했습니다. 소량의 목록과 상세 페이지를 확인하고 원문을 수집하고 사진을 저장했습니다. AI의 도움을 받아서 같은 자료를 다시 받았을 때 무엇이 달라졌는지 추적하도록 했습니다.
실제 오류도 겪었습니다. 예를 들어 사진이나 텍스트를 받아오는 데 깨져서 받아온다거나, 관람 화면이 제대로 표시 안된다거나 하는 식으로요. 제가 여러 차례 피드백을 주고 큰 아치와 양옆 전시벽, 바닥과 시점 이동을 다시 다듬었습니다.
AI는 이 사이트 설계 및 구현, 자료 수집 및 검증 과정에 활용했습니다.
3. 활용 결과 어떤 변화가 있었나요?
실제 사진과 기록을 관람할 수 있는 웹 박물관을 공개했습니다. 본래라면 사이트 하나를 만드려면 많은 것을 배워야 하지만 별다른 무리 없이 공개된 페이지 까지 만들 수 있었습니다.
https://timeportal-incheon-museum.pages.dev/
입구에서 ‘간석동의 1990년대’, ‘학교의 기억’, ‘산업도시 인천’, ‘인천의 바다’를 고르면 형성 연출을 거쳐 로비와 전시실로 들어갑니다. 큰 아치 안에서 사진을 보고 전체 사진을 따로 확대하거나 출처와 기록을 읽을 수 있습니다. ‘산업도시 인천’에서는 부지 사진과 사진으로 남긴 문서를 두 전시실로 나누어 관람합니다. 지역 목록에서도 확보한 기록을 고를 수 있습니다.
현재 공개 버전에는 2개 기관에서 수집한 실제 기록 17개와 이미지 17개가 있습니다.
4. 나만의 방식 또는 개선 포인트는 무엇인가요?
첫째, 사진을 화면에 띄우는 데서 끝내지 않고 수집한 사이트를 연결했습니다. 향후 여러 지역에 걸쳐 컨텐츠를 확장시킬 수 있도록 자료 수집 기능과 실제 자료를 보여주는 프론트 화면을 분리하도록 개발했습니다.
둘째, 사진과 설명이 실제로 맞는지를 다시 살폈습니다. 사진에서 눈으로 확인할 수 있는 장면을 설명하고, 기관이 제공한 해설은 별도로 표시했습니다. 자료를 여러 군데에서 수집하다 보니 설명과 사진이 불일치 하기도 했는데 보이는 사진이 정자 중심이면 그 장면을 먼저 설명하도록 고쳤습니다.
셋째, 현재 가능한 범위와 목표를 구분했습니다. 개발 중 입력형 검색도 시험했지만 모든 검색어에 맞는 실제 자료를 확보할 수는 없었습니다. 그래서 큰 목표를 이루기 전 작은 목표를 이루고자 자유 검색 후 실시간 자료 수집은 다음 단계로 남겼습니다.
넷째, AI의 완료 보고보다 실제 동작을 기준으로 검토했습니다. AI가 완벽하게 만들었다고 하지만 실제 체험을 해보니 여러 문제가 있었습니다. 공간감이 부족하다는 피드백, 작은 모바일 글씨, 가로 화면 겹침을 수정했고, 출처 내용의 맨 아래까지 읽은 뒤에도 닫기 버튼을 누를 수 있는지 확인했습니다.
5. 다른 사람도 따라 할 수 있나요?
네. 이 사례에서 재현할 수 있는 것은 확인 가능한 자료를 작은 범위부터 모으고, AI와 함께 실제로 작동하는 도구로 연결하는 과정입니다. 처음부터 모든 기관과 모든 기능을 한꺼번에 완성하려 하기보다 자료원 한 곳의 목록·상세·사진을 확보하고 다음 회차에도 같은 결과가 나오는지 확인하는 방식으로 시작할 수 있습니다.
AI에게는 자료의 원문을 어디에 남길지, 무엇으로 같은 기록을 구분할지, 날짜가 불명확할 때 어떻게 표시할지, 실패하면 기존 자료를 어떻게 보존할지를 구체적으로 설명하는 것이 중요했습니다. 코드를 받은 뒤에는 파일과 화면을 직접 실행해 보고, 어긋난 조건을 다시 설명하며 고치는 과정이 필요했습니다. 이 과정에서 필요한 것은 AI에게 지속적으로 피드백을 주고 내가 원하는 방향성, 내가 머릿속에 생각하고 있는 그림이 구체적이여야 한다는 것입니다. 무작정 모호한 지시를 내리면 내가 원하는 것과 멀어진 다는 것을 배웠습니다.
솔직히 아직은 제대로 된 서비스 단계는 아닙니다. 다만 실제 기록을 모으고 출처를 확인한 뒤 컨텐츠를 확장 가능한 베이스는 완성이 되었다고 생각합니다.
익숙한 동네의 예전 모습이 궁금해도, 기록은 한곳에 모여 있지 않았습니다. 사진은 경관 아카이브에, 유산 자료는 다른 기관에, 학교와 생활의 기록은 또 다른 곳에 있었습니다. 기관마다 검색 방법과 자료 형식, 사진을 여는 방식이 달랐고, 자료를 찾은 뒤에도 어느 장소의 무엇을 찍은 사진인지 다시 확인해야 했습니다.
제가 만들고 싶었던 것은 인천의 기록을 사진과 출처까지 연결해 한 공간에서 관람하는 박물관이었습니다. 특정 관광지 한 곳에 한정하지 않고 인천 전역을 대상으로 하되, 확보한 자료의 범위는 솔직하게 보여주고 싶었습니다. 자료 수집부터 재사용할 데이터와 관람 화면까지 함께 만들어야 했기에 AI를 개발 파트너로 활용했습니다.
2. 어떤 AI를 어떻게 활용했나요?
ChatGPT로 초안을 작성하고 실제 개발은 Codex에 원하는 흐름과 제약을 설명하고, 자료원 조사와 수집기, 데이터 정리, 웹 전시 구현을 진행했습니다.
수집은 작은 계획부터 시작했습니다. 소량의 목록과 상세 페이지를 확인하고 원문을 수집하고 사진을 저장했습니다. AI의 도움을 받아서 같은 자료를 다시 받았을 때 무엇이 달라졌는지 추적하도록 했습니다.
실제 오류도 겪었습니다. 예를 들어 사진이나 텍스트를 받아오는 데 깨져서 받아온다거나, 관람 화면이 제대로 표시 안된다거나 하는 식으로요. 제가 여러 차례 피드백을 주고 큰 아치와 양옆 전시벽, 바닥과 시점 이동을 다시 다듬었습니다.
AI는 이 사이트 설계 및 구현, 자료 수집 및 검증 과정에 활용했습니다.
3. 활용 결과 어떤 변화가 있었나요?
실제 사진과 기록을 관람할 수 있는 웹 박물관을 공개했습니다. 본래라면 사이트 하나를 만드려면 많은 것을 배워야 하지만 별다른 무리 없이 공개된 페이지 까지 만들 수 있었습니다.
https://timeportal-incheon-museum.pages.dev/
입구에서 ‘간석동의 1990년대’, ‘학교의 기억’, ‘산업도시 인천’, ‘인천의 바다’를 고르면 형성 연출을 거쳐 로비와 전시실로 들어갑니다. 큰 아치 안에서 사진을 보고 전체 사진을 따로 확대하거나 출처와 기록을 읽을 수 있습니다. ‘산업도시 인천’에서는 부지 사진과 사진으로 남긴 문서를 두 전시실로 나누어 관람합니다. 지역 목록에서도 확보한 기록을 고를 수 있습니다.
현재 공개 버전에는 2개 기관에서 수집한 실제 기록 17개와 이미지 17개가 있습니다.
4. 나만의 방식 또는 개선 포인트는 무엇인가요?
첫째, 사진을 화면에 띄우는 데서 끝내지 않고 수집한 사이트를 연결했습니다. 향후 여러 지역에 걸쳐 컨텐츠를 확장시킬 수 있도록 자료 수집 기능과 실제 자료를 보여주는 프론트 화면을 분리하도록 개발했습니다.
둘째, 사진과 설명이 실제로 맞는지를 다시 살폈습니다. 사진에서 눈으로 확인할 수 있는 장면을 설명하고, 기관이 제공한 해설은 별도로 표시했습니다. 자료를 여러 군데에서 수집하다 보니 설명과 사진이 불일치 하기도 했는데 보이는 사진이 정자 중심이면 그 장면을 먼저 설명하도록 고쳤습니다.
셋째, 현재 가능한 범위와 목표를 구분했습니다. 개발 중 입력형 검색도 시험했지만 모든 검색어에 맞는 실제 자료를 확보할 수는 없었습니다. 그래서 큰 목표를 이루기 전 작은 목표를 이루고자 자유 검색 후 실시간 자료 수집은 다음 단계로 남겼습니다.
넷째, AI의 완료 보고보다 실제 동작을 기준으로 검토했습니다. AI가 완벽하게 만들었다고 하지만 실제 체험을 해보니 여러 문제가 있었습니다. 공간감이 부족하다는 피드백, 작은 모바일 글씨, 가로 화면 겹침을 수정했고, 출처 내용의 맨 아래까지 읽은 뒤에도 닫기 버튼을 누를 수 있는지 확인했습니다.
5. 다른 사람도 따라 할 수 있나요?
네. 이 사례에서 재현할 수 있는 것은 확인 가능한 자료를 작은 범위부터 모으고, AI와 함께 실제로 작동하는 도구로 연결하는 과정입니다. 처음부터 모든 기관과 모든 기능을 한꺼번에 완성하려 하기보다 자료원 한 곳의 목록·상세·사진을 확보하고 다음 회차에도 같은 결과가 나오는지 확인하는 방식으로 시작할 수 있습니다.
AI에게는 자료의 원문을 어디에 남길지, 무엇으로 같은 기록을 구분할지, 날짜가 불명확할 때 어떻게 표시할지, 실패하면 기존 자료를 어떻게 보존할지를 구체적으로 설명하는 것이 중요했습니다. 코드를 받은 뒤에는 파일과 화면을 직접 실행해 보고, 어긋난 조건을 다시 설명하며 고치는 과정이 필요했습니다. 이 과정에서 필요한 것은 AI에게 지속적으로 피드백을 주고 내가 원하는 방향성, 내가 머릿속에 생각하고 있는 그림이 구체적이여야 한다는 것입니다. 무작정 모호한 지시를 내리면 내가 원하는 것과 멀어진 다는 것을 배웠습니다.
솔직히 아직은 제대로 된 서비스 단계는 아닙니다. 다만 실제 기록을 모으고 출처를 확인한 뒤 컨텐츠를 확장 가능한 베이스는 완성이 되었다고 생각합니다.
