인터렉티브한 웹사이트를 만드는 방법, 참고할만한 사이트

인터렉티브한 웹사이트를 모아봤습니다! 버튼을 누르거나, 마우스를 드래그 또는 스크롤했을때 어떤 반응이 나타나는 것을 좋아하시나요? 대화형 UI는 사이트의 참여도를 높이는데에 아주 효과적이고, 게임을 만들 수도 있습니다. 참고할만한 사이트 목록을 확인하고 영감을 얻어보세요.

 

누르면 반응하는 것들을 좋아하시나요? 저는 좋아합니다. 인터렉티브한 웹사이트를 만드려고 할 때 알아두면 좋을 사이트들을 정리해보았습니다.

 

 

인터렉티브한 웹사이트를 만드는 방법

 

1. 인터렉션 관련 소스, 플랫폼

깃허브를 통해 소스를 분석할 수도 있지만, 여러가지 실험들을 보면서 프로젝트 아이디어를 생각하기에도 좋습니다!

 

• Chrome 실험(크롬에서 할수있는 여러 시청각적 실험)
• 구글크리에이티브랩_깃허브
• 구글크리에이티브랩_텍스트를 음성으로 변환하는 TTS_깃허브
• 구글크리에이티브랩_빨리그리기게임_깃허브
• 구글크리에이티브랩_음향 뮤지컬포레스트_깃허브
• 구글어시스턴스_헤이구글(음성으로 실행가능한 앱들)

 

위의 사이트들이 실험적인 것들이라면, 일반적으로 두루 쓰이는 특정 UI 효과에 대한 소스 코드와 튜토리얼을 제공하는 사이트는 다음 글에 정리해두었습니다.

 

2021.12.26 - [구현/웹 구현] - 특정 UI 효과 구현하기 (소스 코드, 튜토리얼 사이트)

 

 

2. 참고할만한 해외 웹사이트들

FWA와 Awwwards는 웹사이트와 웹디자인 부문에서 아주 유명한 사이트입니다. 필터가 있어서, 원하는 디자인이나 유형의 사이트를 찾아 참고하기에 좋습니다. 그 밖에 인터렉티브한 웹을 만들기 위해 참고했던 아티클들도 적어보았습니다.

 

• The FWA(웹 어워드 수상작 확인)
• Awwwards(최고의 웹 및 대화형 웹사이트 등)
• qodeinteractive(웹 기획, 디자인에 관한 글들)
• Siteinspire(주제별 웹사이트 필터링)

 

 

 

인터렉티브한 웹사이트 참고

 

지금부터 소개해드리는 사이트들은 인터렉티브 아트 또는 게임이라고도 말할 수 있을 것 같습니다. 재미있는 작품들을 만나실 수 있으니 심심하실 때 하나씩 들어가보세요.

 

1. 스토리가 있는

하나의 게임같기도 하고, 인터렉티브한 현대미술같기도 한 사이트들입니다. 주요 주제에 따른 스토리와 그래픽 컨셉이 뚜렷하게 드러나있는 것이 특징입니다.

 

• 유목민 부족(드래그하는대로 만들어지는 꽃이 인상적)
• 할머니의 용어(멸종위기 언어에 대한 문제제기)
• It's n̶o̶t̶ violent(데이트 폭력에 대한 문제를 채팅창과 선택지로 표현)
• TRAFFICKED(인신매매에 대한 문제제기 스토리텔링)

 

특히 유목민 부족은 굉장히 아름답고 재미있으니 꼭 한번 해보세요.

 

 

 

2. 작은 인터렉션

간단한 클릭, 드래그 등만으로 작동하는 작은 인터렉션으로 제작된 유형을 모아봤습니다.

 

• Noisli(아이콘을 누르면 소리나옴. ASMR)
• In Pieces(멸종위기동물 3D벡터조각) 
• POP! crackART (드래그하면 사탕이 터진다)
• mon.cmiscm(드래그하면 털이 묶이는 등 재밌는 효과. 할로윈 컨셉)
• buddhapizza(커서에 따라 움직이는 눈)
• synerghetic(커서에 따라 움직이는 눈2)

 

 

 

이상으로 인터렉티브한 웹사이트를 만드는 방법과 참고할만한 사이트까지 안내를 마치겠습니다.

 

누군가 위의 사이트들을 방문해서 플레이해보셨다면, 댓글로 어떤 사이트가 좋았는지 알려주세요. 제가 좋아하는 것을 여러분도 좋아하실지 궁금해요 ㅎㅎ

 

 

 

읽어주셔서 감사합니다.