목록으로
생활 속 AI 활용
AI와 함께 만든 우리 고양이의 시간, 코코·나나 아카이브
반려묘 코코와 나나와의 추억을 한곳에 담은 디지털 아카이브
🤖 활용 AI 도구
ChatGPT
링크: https://coco-nana.pages.dev/
① 어떤 상황에서 AI를 활용했나요?
오랜 시간 함께한 반려묘 코코와 나나의 사진과 추억이 휴대폰과 여러 저장공간에 흩어져 있어, 시간이 지나도 한눈에 꺼내 볼 수 있는 공간을 만들고 싶었습니다.
처음에는 연도별 사진을 정리하는 단순한 웹페이지를 생각했지만, 제작을 시작하면서 두 고양이의 성격과 특징을 소개하는 프로필, 사진 기록, 직접 만든 이모티콘과 게임까지 함께 담으면 더 특별한 기록이 될 것 같았습니다.
웹 개발과 디자인을 혼자 모두 진행하는 데에는 어려움이 있어 생성형 AI를 활용해 ‘코코 & 나나 아카이브’를 직접 제작했습니다.
② 어떤 AI를 어떻게 활용했나요?
생성형 AI를 웹사이트 기획, 디자인, 코딩, 이미지 창작 등 여러 단계에서 활용했습니다.
먼저 아카이브 전체 구조를 함께 정리하고, 코코와 나나의 특징이 잘 드러나는 프로필 영역과 연도별 갤러리를 구성했습니다. 이후 AI의 도움을 받아 HTML·CSS·JavaScript 코드를 작성하고, PC와 모바일에서 사진을 편하게 볼 수 있도록 갤러리와 이미지 확대 기능 등을 구현했습니다.
아카이브는 크게 다음과 같은 콘텐츠로 구성했습니다.
1. 코코·나나 프로필
두 고양이의 사진과 이름, 생일, 특징 등을 소개해 처음 방문한 사람도 코코와 나나를 쉽게 알 수 있도록 구성했습니다.
2. 연도별 갤러리
처음 함께한 시기부터 최근까지의 사진과 영상을 연도별로 정리했습니다. 단순히 사진을 나열하기보다 썸네일을 누르면 크게 볼 수 있도록 구현해, 시간이 흐르면서 달라지는 모습을 하나의 성장 기록처럼 볼 수 있도록 했습니다.
3. AI를 활용해 창작한 코코·나나 이모티콘
코코와 나나의 외모와 성격을 바탕으로 AI를 활용해 다양한 표정과 상황의 캐릭터 이미지를 제작했습니다. 실제 반려묘의 특징이 사라지지 않도록 얼굴 무늬, 눈 색상, 털색 등 세부적인 특징을 여러 번 수정하면서 캐릭터의 일관성을 맞췄습니다. 창작한 이모티콘은 실제로 LINE, 네이버 OGQ에 등록되어 판매 중입니다.
4. AI를 활용해 제작한 코코·나나 게임
사진을 기록하는 것에서 더 나아가 코코와 나나를 주인공으로 한 온라인 게임도 제작했습니다. AI와 함께 스토리와 퍼즐을 기획하고, 일러스트와 HTML·CSS·JavaScript를 활용해 실제로 플레이할 수 있는 웹게임으로 구현했습니다. 완성된 게임은 아카이브에서도 바로 확인할 수 있도록 연결했습니다.
③ 활용 결과 어떤 변화가 있었나요?
휴대폰 속에 흩어져 있던 사진들이 단순한 파일이 아니라, 코코와 나나의 시간을 한눈에 볼 수 있는 하나의 디지털 기록 공간으로 바뀌었습니다.
처음에는 사진을 정리하기 위한 작은 프로젝트였지만, AI를 활용하면서 프로필과 갤러리뿐 아니라 캐릭터 이모티콘과 웹게임까지 직접 제작할 수 있었습니다.
그 결과 과거의 사진을 보관하는 아카이브를 넘어, 두 고양이를 소재로 새로운 콘텐츠를 계속 만들어 추가할 수 있는 공간으로 발전했습니다. 사진을 보는 것에서 끝나는 것이 아니라, 이모티콘과 게임처럼 추억을 새로운 형태의 창작물로 다시 만들어 볼 수 있다는 점도 재미있었습니다.
④ 나만의 방식 또는 개선 포인트는 무엇인가요?
AI가 처음 만들어 준 결과를 그대로 사용하는 대신, 실제 코코와 나나의 특징을 얼마나 잘 반영하고 있는지 직접 비교하면서 반복적으로 수정한 점이 가장 중요했습니다.
특히 AI 이미지 제작에서는 코코의 얼굴 무늬나 나나의 눈 색처럼 작은 특징도 조금씩 달라질 수 있어 원본 사진과 비교하면서 세세하게 수정했습니다.
웹사이트 역시 실제 휴대폰에서 직접 확인하면서 사진 크기, 갤러리 이동 방식, 글자 크기, 이미지 확대 기능 등을 계속 개선했습니다.
이 과정에서 AI에게 막연하게 “예쁘게 만들어줘”라고 요청하기보다, 어떤 부분이 실제 모습과 다른지, 어떤 화면에서 무엇이 불편한지 구체적으로 설명할수록 결과가 좋아진다는 점을 경험했습니다.
⑤ 다른 사람도 따라 할 수 있나요?
반려동물 사진을 많이 가지고 있다면 누구나 비슷한 방식으로 시작할 수 있습니다.
먼저 사진을 연도나 주제별로 정리한 뒤, AI에게 웹사이트 구조와 필요한 기능을 하나씩 요청하면 됩니다. 개발 경험이 많지 않아도 프로필, 사진 갤러리처럼 간단한 기능부터 시작해 조금씩 확장할 수 있습니다.
사진 기록에 익숙해지면 AI를 활용해 캐릭터 이미지나 이모티콘을 만들어 보거나, 반려동물을 주인공으로 한 퀴즈·미니게임 같은 콘텐츠를 추가할 수도 있습니다.
저에게 AI는 단순히 사진을 정리해 주는 도구가 아니라, 소중한 일상의 기록을 새로운 형태의 콘텐츠로 확장할 수 있게 해 준 창작 파트너가 되었습니다.
① 어떤 상황에서 AI를 활용했나요?
오랜 시간 함께한 반려묘 코코와 나나의 사진과 추억이 휴대폰과 여러 저장공간에 흩어져 있어, 시간이 지나도 한눈에 꺼내 볼 수 있는 공간을 만들고 싶었습니다.
처음에는 연도별 사진을 정리하는 단순한 웹페이지를 생각했지만, 제작을 시작하면서 두 고양이의 성격과 특징을 소개하는 프로필, 사진 기록, 직접 만든 이모티콘과 게임까지 함께 담으면 더 특별한 기록이 될 것 같았습니다.
웹 개발과 디자인을 혼자 모두 진행하는 데에는 어려움이 있어 생성형 AI를 활용해 ‘코코 & 나나 아카이브’를 직접 제작했습니다.
② 어떤 AI를 어떻게 활용했나요?
생성형 AI를 웹사이트 기획, 디자인, 코딩, 이미지 창작 등 여러 단계에서 활용했습니다.
먼저 아카이브 전체 구조를 함께 정리하고, 코코와 나나의 특징이 잘 드러나는 프로필 영역과 연도별 갤러리를 구성했습니다. 이후 AI의 도움을 받아 HTML·CSS·JavaScript 코드를 작성하고, PC와 모바일에서 사진을 편하게 볼 수 있도록 갤러리와 이미지 확대 기능 등을 구현했습니다.
아카이브는 크게 다음과 같은 콘텐츠로 구성했습니다.
1. 코코·나나 프로필
두 고양이의 사진과 이름, 생일, 특징 등을 소개해 처음 방문한 사람도 코코와 나나를 쉽게 알 수 있도록 구성했습니다.
2. 연도별 갤러리
처음 함께한 시기부터 최근까지의 사진과 영상을 연도별로 정리했습니다. 단순히 사진을 나열하기보다 썸네일을 누르면 크게 볼 수 있도록 구현해, 시간이 흐르면서 달라지는 모습을 하나의 성장 기록처럼 볼 수 있도록 했습니다.
3. AI를 활용해 창작한 코코·나나 이모티콘
코코와 나나의 외모와 성격을 바탕으로 AI를 활용해 다양한 표정과 상황의 캐릭터 이미지를 제작했습니다. 실제 반려묘의 특징이 사라지지 않도록 얼굴 무늬, 눈 색상, 털색 등 세부적인 특징을 여러 번 수정하면서 캐릭터의 일관성을 맞췄습니다. 창작한 이모티콘은 실제로 LINE, 네이버 OGQ에 등록되어 판매 중입니다.
4. AI를 활용해 제작한 코코·나나 게임
사진을 기록하는 것에서 더 나아가 코코와 나나를 주인공으로 한 온라인 게임도 제작했습니다. AI와 함께 스토리와 퍼즐을 기획하고, 일러스트와 HTML·CSS·JavaScript를 활용해 실제로 플레이할 수 있는 웹게임으로 구현했습니다. 완성된 게임은 아카이브에서도 바로 확인할 수 있도록 연결했습니다.
③ 활용 결과 어떤 변화가 있었나요?
휴대폰 속에 흩어져 있던 사진들이 단순한 파일이 아니라, 코코와 나나의 시간을 한눈에 볼 수 있는 하나의 디지털 기록 공간으로 바뀌었습니다.
처음에는 사진을 정리하기 위한 작은 프로젝트였지만, AI를 활용하면서 프로필과 갤러리뿐 아니라 캐릭터 이모티콘과 웹게임까지 직접 제작할 수 있었습니다.
그 결과 과거의 사진을 보관하는 아카이브를 넘어, 두 고양이를 소재로 새로운 콘텐츠를 계속 만들어 추가할 수 있는 공간으로 발전했습니다. 사진을 보는 것에서 끝나는 것이 아니라, 이모티콘과 게임처럼 추억을 새로운 형태의 창작물로 다시 만들어 볼 수 있다는 점도 재미있었습니다.
④ 나만의 방식 또는 개선 포인트는 무엇인가요?
AI가 처음 만들어 준 결과를 그대로 사용하는 대신, 실제 코코와 나나의 특징을 얼마나 잘 반영하고 있는지 직접 비교하면서 반복적으로 수정한 점이 가장 중요했습니다.
특히 AI 이미지 제작에서는 코코의 얼굴 무늬나 나나의 눈 색처럼 작은 특징도 조금씩 달라질 수 있어 원본 사진과 비교하면서 세세하게 수정했습니다.
웹사이트 역시 실제 휴대폰에서 직접 확인하면서 사진 크기, 갤러리 이동 방식, 글자 크기, 이미지 확대 기능 등을 계속 개선했습니다.
이 과정에서 AI에게 막연하게 “예쁘게 만들어줘”라고 요청하기보다, 어떤 부분이 실제 모습과 다른지, 어떤 화면에서 무엇이 불편한지 구체적으로 설명할수록 결과가 좋아진다는 점을 경험했습니다.
⑤ 다른 사람도 따라 할 수 있나요?
반려동물 사진을 많이 가지고 있다면 누구나 비슷한 방식으로 시작할 수 있습니다.
먼저 사진을 연도나 주제별로 정리한 뒤, AI에게 웹사이트 구조와 필요한 기능을 하나씩 요청하면 됩니다. 개발 경험이 많지 않아도 프로필, 사진 갤러리처럼 간단한 기능부터 시작해 조금씩 확장할 수 있습니다.
사진 기록에 익숙해지면 AI를 활용해 캐릭터 이미지나 이모티콘을 만들어 보거나, 반려동물을 주인공으로 한 퀴즈·미니게임 같은 콘텐츠를 추가할 수도 있습니다.
저에게 AI는 단순히 사진을 정리해 주는 도구가 아니라, 소중한 일상의 기록을 새로운 형태의 콘텐츠로 확장할 수 있게 해 준 창작 파트너가 되었습니다.
