목록으로
교육·학습을 위한 AI 활용
첫 출국을 미리 연습하다 - AI와 만든 공항 리허설
처음 출국하는 사람이 전광판을 읽고, 카운터를 찾고, 직원에게 서류를 건네는 과정을 설치 없이 직접 연습할 수 있도록 AI와 함께 만든 웹 체험입니다.
🤖 활용 AI 도구
ChatGPT·Codex(기획 정리, 코드 제작·수정, 검증), ChatGPT 이미지 생성 기능
1. 어떤 상황에서 AI를 활용했나요?
처음 해외여행을 준비하는 사람은 출국 절차를 읽어도 공항에 도착한 뒤 무엇부터 확인해야 할지 막막할 수 있습니다. 예약에 적힌 편명과 전광판의 정보를 비교하고, 알맞은 카운터를 찾고, 직원에게 서류를 건네는 일은 따로 외우는 지식이면서 동시에 하나로 이어지는 행동입니다. 저는 이 흐름을 실제 공항에 가기 전에 직접 연습해 볼 수 있는 체험을 만들고 싶었습니다. 어떻게 보면 간단한 게임 같은 것을 만들고 싶었고 이 과정에서 AI를 활용했습니다.
목표는 출국장 도착부터 체크인과 훈련용 탑승권 수령까지의 첫 구간으로 정했습니다. 안내문을 보여주는 데서 끝나지 않고, 사용자가 주변 정보를 읽고 이동하고 서류를 꺼내도록 했습니다. 잘못된 카운터에 갔거나 오래된 서류를 보여줬을 때도 상황을 이해하고 다시 확인할 수 있게 만드는 것이 중요했습니다.
2. 어떤 AI를 어떻게 활용했나요?
먼저 제가 계획서 초안을 작성한 뒤 그것을 바탕으로 ChatGPT와 Codex에게 장면, 필요한 정보, 이동 순서와 예외 조건을 구체적으로 설명했습니다. AI는 내용을 정리하고 웹 코드를 작성했으며, 저는 실제 결과를 보고 원하는 방향과 수정할 부분을 다시 전달했습니다. 또한 이 서비스를 만드는데 필요한 이미지 제작부터 기능 구현, 직접 플레이와 공개 배포까지 같은 작업 흐름 안에서 이어갔습니다.
실사풍 공항 장면과 직원·여권·캐리어 등의 이미지 변형 51장을 제작했습니다. 먼저 기준이 되는 인물과 소품을 확인하고, 그 이미지를 참조해 다른 표정과 상태를 이어 만들었습니다. 장면마다 인물이 달라지거나 소품 모양이 바뀌지 않도록 프롬프트에 신경을 썼습니다. 전광판의 편명과 카운터, 서류의 날짜와 시간은 이미지에 고정하지 않고 프로그램에서 별도로 표시했습니다. 사용자가 아직 확인하지 않은 정보를 안내가 먼저 알려주지 않도록, 공항 내부의 설정과 사용자가 실제로 읽은 정보를 나눠 관리했습니다.
3. 활용 결과 어떤 변화가 있었나요?
계획과 이미지가 실제로 플레이할 수 있는 공개 웹 프로토타입으로 이어졌습니다. 완성한 리허설은 https://first-departure-world05.pages.dev/ 에서 바로 체험할 수 있습니다. 첫 화면에서 '첫 출국'을 선택하고 '리허설 시작'을 누르면 됩니다. 여행 지갑에서 예약을 확인하고, 전광판이나 안내 데스크를 통해 카운터를 찾아가면 됩니다.
기본 상황 외에 카운터 변경, 서류 오류, 마감 임박, 위탁 수하물이 없는 상황도 넣었습니다. 카운터가 바뀌면 새 안내를 확인하고 이동하고, 서류에 문제가 있으면 사용할 문서를 다시 선택해 직원에게 보여줍니다. 위탁할 짐이 없으면 저울에 올리는 과정을 요구하지 않습니다. 마감을 넘긴 경우에는 탑승권을 억지로 발급하지 않고 직원 안내와 이번 연습을 돌아보는 단계로 마무리합니다.
사실 저도 해외 여행을 간 지 좀 오래되서 기억이 가물거리지만 이것을 개발하면서 다시 그 때의 일이 떠오르게 되었습니다. 첫 해외여행 전에 실수할까봐 혹은 문제가 생길까봐 조마조마 했던 추억이 떠올라 개발 과정이 꽤나 즐거웠습니다.
4. 나만의 방식 또는 개선 포인트는 무엇인가요?
먼저 직접 플레이가 가능하다를 목표로 정했습니다. 처음엔 이미지를 외부에서 구하려다 쉽지 않다는 걸 깨닫고 바로 필요한 51장을 만들고 그 결과를 웹 체험에 연결하도록 했습니다. 그 후 AI가 만든 결과를 플레이해보고 피드백을 주고 그렇게 반복을 하며 직접 확인하고 수정했습니다.
화면을 검토할 때는 처음 출국하는 사람의 입장에서 다음 행동을 알 수 있는지 살폈습니다. 예약의 핵심 정보를 먼저 보여주고, 전광판에서 읽은 정보를 기록한 뒤 이동할 수 있도록 했습니다. 잘못된 줄에서 나온 뒤 같은 줄을 다시 권하던 안내, 여러 서류 중 무엇을 선택했는지 알기 어려운 표시, 직원과 대화하던 곳으로 돌아가는 동선도 고쳤습니다. 하면서 글자 크기와 혹은 다른 해상도, 휴대폰 화면에서 보이는 버튼·문서 배치도 점검했습니다.
구체적인 지시가 없이 처음엔 공항 체험 게임같은 걸 만들어달라 했으나 제가 의도한 느낌이 아닌 요상한 3D 게임이 나와서 신기하기도 했고 마음에 들지도 않아 이리저리 바꾸다 결국 완성한 형태가 바로 이 형태입니다.
5. 다른 사람도 따라 할 수 있나요?
네. 이 사례에서 따라 할 수 있는 것은 익숙하지 않은 절차를 AI와 함께 연습 가능한 체험으로 바꾸는 과정입니다. 뭘 만들고 싶은가? 그리고 이걸 플레이 할 사용자는 무엇을 보고 어떤 행동을 해야 하는지 순서대로 설명하면 됩니다. 세세한 개발 방법론은 몰라도 상관 없었습니다. 가장 중요한 건 역시 명확한 기획이라고 생각합니다. 내가 만들고 싶은 것을 AI에게 상세하게 알려주는 것, 그걸 할 수 있다면 누구든 따라할 수 있다고 생각합니다.
이미지를 만들 때는 장면마다 새로 요청하기보다 기준 인물과 소품을 정해 참조하고, 바뀌는 정보는 프로그램으로 표시하도록 나누는 방식이 유용했습니다. 구현 후에는 처음부터 끝까지 실행하고, 작은 화면에서도 글씨와 버튼이 읽히는지, 실수한 뒤 다시 진행할 수 있는지 QA도 계속 진행하면서 AI에게 집요하게 수정을 요청하는 끈기만 있다면 누구나 이정도 수준은 만들 수 있다 생각합니다.
처음 해외여행을 준비하는 사람은 출국 절차를 읽어도 공항에 도착한 뒤 무엇부터 확인해야 할지 막막할 수 있습니다. 예약에 적힌 편명과 전광판의 정보를 비교하고, 알맞은 카운터를 찾고, 직원에게 서류를 건네는 일은 따로 외우는 지식이면서 동시에 하나로 이어지는 행동입니다. 저는 이 흐름을 실제 공항에 가기 전에 직접 연습해 볼 수 있는 체험을 만들고 싶었습니다. 어떻게 보면 간단한 게임 같은 것을 만들고 싶었고 이 과정에서 AI를 활용했습니다.
목표는 출국장 도착부터 체크인과 훈련용 탑승권 수령까지의 첫 구간으로 정했습니다. 안내문을 보여주는 데서 끝나지 않고, 사용자가 주변 정보를 읽고 이동하고 서류를 꺼내도록 했습니다. 잘못된 카운터에 갔거나 오래된 서류를 보여줬을 때도 상황을 이해하고 다시 확인할 수 있게 만드는 것이 중요했습니다.
2. 어떤 AI를 어떻게 활용했나요?
먼저 제가 계획서 초안을 작성한 뒤 그것을 바탕으로 ChatGPT와 Codex에게 장면, 필요한 정보, 이동 순서와 예외 조건을 구체적으로 설명했습니다. AI는 내용을 정리하고 웹 코드를 작성했으며, 저는 실제 결과를 보고 원하는 방향과 수정할 부분을 다시 전달했습니다. 또한 이 서비스를 만드는데 필요한 이미지 제작부터 기능 구현, 직접 플레이와 공개 배포까지 같은 작업 흐름 안에서 이어갔습니다.
실사풍 공항 장면과 직원·여권·캐리어 등의 이미지 변형 51장을 제작했습니다. 먼저 기준이 되는 인물과 소품을 확인하고, 그 이미지를 참조해 다른 표정과 상태를 이어 만들었습니다. 장면마다 인물이 달라지거나 소품 모양이 바뀌지 않도록 프롬프트에 신경을 썼습니다. 전광판의 편명과 카운터, 서류의 날짜와 시간은 이미지에 고정하지 않고 프로그램에서 별도로 표시했습니다. 사용자가 아직 확인하지 않은 정보를 안내가 먼저 알려주지 않도록, 공항 내부의 설정과 사용자가 실제로 읽은 정보를 나눠 관리했습니다.
3. 활용 결과 어떤 변화가 있었나요?
계획과 이미지가 실제로 플레이할 수 있는 공개 웹 프로토타입으로 이어졌습니다. 완성한 리허설은 https://first-departure-world05.pages.dev/ 에서 바로 체험할 수 있습니다. 첫 화면에서 '첫 출국'을 선택하고 '리허설 시작'을 누르면 됩니다. 여행 지갑에서 예약을 확인하고, 전광판이나 안내 데스크를 통해 카운터를 찾아가면 됩니다.
기본 상황 외에 카운터 변경, 서류 오류, 마감 임박, 위탁 수하물이 없는 상황도 넣었습니다. 카운터가 바뀌면 새 안내를 확인하고 이동하고, 서류에 문제가 있으면 사용할 문서를 다시 선택해 직원에게 보여줍니다. 위탁할 짐이 없으면 저울에 올리는 과정을 요구하지 않습니다. 마감을 넘긴 경우에는 탑승권을 억지로 발급하지 않고 직원 안내와 이번 연습을 돌아보는 단계로 마무리합니다.
사실 저도 해외 여행을 간 지 좀 오래되서 기억이 가물거리지만 이것을 개발하면서 다시 그 때의 일이 떠오르게 되었습니다. 첫 해외여행 전에 실수할까봐 혹은 문제가 생길까봐 조마조마 했던 추억이 떠올라 개발 과정이 꽤나 즐거웠습니다.
4. 나만의 방식 또는 개선 포인트는 무엇인가요?
먼저 직접 플레이가 가능하다를 목표로 정했습니다. 처음엔 이미지를 외부에서 구하려다 쉽지 않다는 걸 깨닫고 바로 필요한 51장을 만들고 그 결과를 웹 체험에 연결하도록 했습니다. 그 후 AI가 만든 결과를 플레이해보고 피드백을 주고 그렇게 반복을 하며 직접 확인하고 수정했습니다.
화면을 검토할 때는 처음 출국하는 사람의 입장에서 다음 행동을 알 수 있는지 살폈습니다. 예약의 핵심 정보를 먼저 보여주고, 전광판에서 읽은 정보를 기록한 뒤 이동할 수 있도록 했습니다. 잘못된 줄에서 나온 뒤 같은 줄을 다시 권하던 안내, 여러 서류 중 무엇을 선택했는지 알기 어려운 표시, 직원과 대화하던 곳으로 돌아가는 동선도 고쳤습니다. 하면서 글자 크기와 혹은 다른 해상도, 휴대폰 화면에서 보이는 버튼·문서 배치도 점검했습니다.
구체적인 지시가 없이 처음엔 공항 체험 게임같은 걸 만들어달라 했으나 제가 의도한 느낌이 아닌 요상한 3D 게임이 나와서 신기하기도 했고 마음에 들지도 않아 이리저리 바꾸다 결국 완성한 형태가 바로 이 형태입니다.
5. 다른 사람도 따라 할 수 있나요?
네. 이 사례에서 따라 할 수 있는 것은 익숙하지 않은 절차를 AI와 함께 연습 가능한 체험으로 바꾸는 과정입니다. 뭘 만들고 싶은가? 그리고 이걸 플레이 할 사용자는 무엇을 보고 어떤 행동을 해야 하는지 순서대로 설명하면 됩니다. 세세한 개발 방법론은 몰라도 상관 없었습니다. 가장 중요한 건 역시 명확한 기획이라고 생각합니다. 내가 만들고 싶은 것을 AI에게 상세하게 알려주는 것, 그걸 할 수 있다면 누구든 따라할 수 있다고 생각합니다.
이미지를 만들 때는 장면마다 새로 요청하기보다 기준 인물과 소품을 정해 참조하고, 바뀌는 정보는 프로그램으로 표시하도록 나누는 방식이 유용했습니다. 구현 후에는 처음부터 끝까지 실행하고, 작은 화면에서도 글씨와 버튼이 읽히는지, 실수한 뒤 다시 진행할 수 있는지 QA도 계속 진행하면서 AI에게 집요하게 수정을 요청하는 끈기만 있다면 누구나 이정도 수준은 만들 수 있다 생각합니다.
