스즈메의 문단속을 보고 chatGPT와 간단한 웹 만들어보기

이 글은 스즈메의 문단속의 스포일러가 될 수 있습니다.

스즈메의 문단속 컨셉의 간단한 웹 만들어보기

주말에 여자친구와 함께 영화 '스즈메의 문단속'을 보고 왔다.
신카이 마코토 감독의 작품인 '너의 이름은', '날씨의 아이'도 모두 재미있게 본 기억이 있다.
그럼에도 개인적으론 사실 크게 기대하지 않고 관람을 했는데 기대 이상으로 너무 재미있게 잘 관람하고 왔다.
특히 지진이 발생하는 것에 대한 표현과 상상력, 마치 일본 여행을 간접적으로 하는 듯한 느낌, 음악, 작화가 너무 좋았다.
일본은 3번이나 다녀오고 여행에 대한 욕구가 딱히 없는 나인데 일본 여행을 또 다녀오고 싶게 만든다...
다만 다른 사람들도 말하듯이 개연성에 대한 건 나도 조금 생각 들게 했지만 개인적으론 크게 문제 될 것은 없어 보인다.

아무튼 이번에 '스즈메의 문단속'을 보고서 문득 문을 여는 듯한 애니메이션 효과를 만들어보면 어떨까 싶어서
chatGPT를 통해 샘플을 받아서 한 번 진행해 보았다.
chatGPT에게 퀄리티 좋은 문 애니메이션을 바라진 않고 그냥 참고만 해보려 한다.

Question

문 모양 div를 만들고 문이 열려있다가 닫히는 애니메이션 효과를 만들어줘

Answer

문 모양의 div를 만들고 문이 열리고 닫히는 애니메이션 효과를 구현하려면 HTML, CSS, 그리고 JavaScript를 사용해야 합니다. 아래의 코드 예제를 확인해 보세요.

HTML:


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>문 열기/닫기 애니메이션</title>
</head>
<body>
  <div class="door-container">
    <div class="door door-left"></div>
    <div class="door door-right"></div>
  </div>
  <button onclick="toggleDoor()">문 열기/닫기</button>
  <script src="script.js"></script>
</body>
</html>

CSS (styles.css):


body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.door-container {
  display: flex;
  width: 200px;
  height: 300px;
  background-color: #654321;
  border: 4px solid #000000;
  position: relative;
}

.door {
  height: 100%;
  width: 50%;
  background-color: #964B00;
  position: absolute;
  transition: transform 1s;
}

.door-left {
  transform-origin: left;
}

.door-right {
  transform-origin: right;
  right: 0;
}

.open .door-left {
  transform: rotateY(180deg);
}

.open .door-right {
  transform: rotateY(-180deg);
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
}

JavaScript (script.js):


let doorOpen = false;

function toggleDoor() {
  const doorContainer = document.querySelector('.door-container');
  doorOpen = !doorOpen;
  
  if (doorOpen) {
    doorContainer.classList.add('open');
  } else {
    doorContainer.classList.remove('open');
  }
}

아래가 해당 코드를 반영했을 때의 결과이다.
그럼 그렇지 이쁘게는 만들지 못하는 GPT 선생님...
하지만 목적은 문을 만드는 애니메이션 효과 자체를 참고하는 것에 목표였으니 그러려니 한다.

자 이제 해당 코드를 좀 참고해서 '스즈메의 문단속'의 컨셉으로 한 번 만들어보자.
우선 구글링해서 문 이미지와 문이 열리고 나서 보일 배경을 찾아 편집을 했다.
포토샵이 없어서 디테일하게는 편집하진 못 했다.
나중에 기회가 된다면 디테일하게 다시 해봐야겠다.

이렇게 편집 후에 해당 other_world 이미지를 배경으로 만들어주고 그 위에 문 이미지 2개를 덮었다.
열리는 부분의 경우에 열렸을 때 입체감을 더 해주기 위해 perspective를 주었다.
mouseover일 때는 살짝만 열리게 하고 mouseout할 때는 닫히고,
클릭시 문이 열리고 확대되면서 fadeout 효과와 함께 사라지면서 배경이 보이게 만들어보았다.

다녀오겠습니다.

문의 이미지에 있는 나뭇잎의 그림자가 좀 거슬리긴 하지만 원했던 구도로 만들어졌다.
재미 삼아 간단하게 만들어보았는데 하나의 아이디어를 여자친구님께서 제시해 줘서 링크로 만들어보았다.
문이 열릴 때 배경 이미지가 랜덤으로 나오는 것인데, 배경 이미지를 랜덤으로 출력해 주는 API가 있는지 GPT에게 질문을 해보았다.

Question

랜덤한 배경 이미지 URL을 return해주는 API가 있어?

Answer

제가 직접 이미지를 생성하거나 반환할 수는 없지만, 랜덤한 배경 이미지를 제공하는 외부 API를 추천해드릴 수 있습니다. Unsplash는 무료로 사용할 수 있는 고품질의 이미지를 제공하는 서비스입니다. Unsplash API를 사용하면 랜덤한 배경 이미지를 가져올 수 있습니다.

API를 사용하려면 먼저 Unsplash에 가입하여 개발자 계정을 만들어야 합니다. 가입 후 API 키를 발급받아 사용할 수 있습니다.

Unsplash API 문서: https://unsplash.com/documentation

글의 길이가 너무 길어지니 이번 포스트에서는 Unslpash API 사용법 및 웹앱에서 진행한 애니메이션, 로직 등에 대한 내용은 스킵하겠다.
완성본은 아래 버튼을 통해 접속할 수 있다.
스포일러가 될만한 내용은 없으며, 링크에서 OPEN 버튼 클릭시 BGM이 나오게 구현했다.

클릭 시 '당신의 문단속' 접속

해당 API를 활용해서 '당신의 문단속'이라는 링크를 만들어보았다.
프레임워크는 NextJS로 작업했으며 Vercel를 사용하여 배포를 진행했다.
chatGPT는 모르는 부분들을 검색해서 참고하는 정도로만 사용했다.

해당 링크에서 OPEN 버튼을 클릭시 '당신의 문단속' 타이틀과 뒷문 이미지가 나오게 했고
영화상에서의 타이틀 애니메이션을 비슷하게 만들어보았다.
BGM의 경우 자동 재생이 브라우저 정책상 적용하면 안 되고 유저의 상호작용이 있어야만 재생할 수 있다는 점도 겸사겸사 공부하게 됐다.

Unsplash API는 DEMO에선 1시간에 50장의 이미지만 제공한다.
현재 Unsplash API에 Production을 신청해 보았는데 승인이 될지는 모르겠다.
참고로 Unsplash API를 Production으로 변경하려면 Unsplash의 약관을 준수해야한다.

약관을 간단하게나마 정리하자면,

- API로 얻은 이미지를 표시할 때 출처를 표기(사진작가 프로필 및 링크를 포함)
- Unsplash 로고를 앱 아이콘으로 사용 불가
- 이미지를 판매 목적으로 사용 불가
- 꼭 API가 반환한 이미지 URL을 사용
- 이미지 다운로드를 구현할 때는 photo.links.download_location에 반환된 링크로 요청

알아본 바로는 이 정도인 것 같다.
아직 승인이 나지 않아서 나중에 승인이 나든, 리젝이 되든 그 때가서 다시 한번 알아볼 생각이다.

스즈메의 문단속을 보고서 간단한 웹앱을 만들어 보는 시간을 가졌다.
간단한 기능들로만 사용해서 만든 링크지만 나름 즐거운 시간이었다.
keyframe도 제대로 다뤄본 적이 없었는데 이번 기회에 조금이나마 알게 된 것도 겸사겸사 좋았다.
(다만 테스트하면서 영화 OST인 참새(스즈메) 초반 10초를 계속 듣다 보니 노이로제가 걸릴 뻔한 건 비밀이다. 🤐)

저작자표시 비영리 변경금지

'Javascript > Others' 카테고리의 다른 글

chatGPT와 JavaScript 공부:프로토타입(Prototype) (0)	2023.05.11
chatGPT와 JavaScript 공부:클로저(Closure) (0)	2023.05.08
chatGPT가 생각하는 아름다운 아코디언 (0)	2023.04.30
chatGPT가 생각하는 가장 멋진 JavaScript 코드는 무엇일까? (2) (feat. IIFE) (2)	2023.03.18
chatGPT가 생각하는 가장 멋진 JavaScript 코드는 무엇일까? (1) (feat. 재귀 함수) (0)	2023.03.15

Little joys

스즈메의 문단속을 보고 chatGPT와 간단한 웹 만들어보기

'Javascript > Others' 카테고리의 다른 글

티스토리툴바

스즈메의 문단속을 보고 chatGPT와 간단한 웹 만들어보기

'Javascript > Others' 카테고리의 다른 글

'Javascript/Others' Related Articles

티스토리툴바