Framer로 만든 화이트노이즈 서비스
Framer 취미생활
요즘에는 삶이 힘들어서 그런지 화이트노이즈, 자연의 소리들을 가끔 찾아 듣습니다. 그런데 마음에 드는 디자인이 거의 없었어요. 그래서 일요일 하루 동안 잠시 근심을 잊고, 머리를 환기시키기 위해 디자인과 프로토타이핑 작업을 했습니다. 하고나니, 정말 요즘 새로운 UI 설계나 디자인에 대한 관심이 없었다는 생각이 들었어요.
1. 디자인 컨셉
멋진 컨셉으로 편안함을 얻을 수 있게 하고 싶었는데, 그래서 어떻게든 가든하다 서비스를 연결지어서 만들고 싶었습니다. 예전부터 제가 무척 좋아하고 있거든요. 가든하다에서 마음에 들었던 테라리움 상품의 이미지를 각각의 화이트노이즈 아이템으로 설정하고, 음악은 유투브에서 Natural sound로 검색을 해서 찾았습니다(개인의 습작 용도이니 저작권에 문제는 없겠죠?ㅠ). 그런데 테라리움 모습과 사운드와의 매칭이 되지 않아 너무 아쉬웠습니다. 다음에 제가 여행가서 직접 녹음을 해와야겠어요 :)
시작한 계기가 마음에 드는 UI를 만들어보자,였기 때문에 디자인은 안하고 아이디어를 생각하는데 시간을 많이 보냈습니다. 최종 인터랙션과 디자인은 아래처럼 완성했습니다. 하지만 저는 그래픽디자인을 잘 하는 사람은 아니라서, 약간은 허술해보이는 것은 어쩔 수 없네요. 뭐, 전체적인 인터랙션의 컨셉이 중요하니까요!
사운드 테마에 대응하는 가든하다의 아이템을 동그란 이미지와 타이틀로 배치하고, 현재 재생되고 있는 아이템은 흰색 카드를 배치하여,
1. 어떤 아이템이 재생되고 있는지 강조한다
2. 해당 아이템에 대한 부가 정보 표시 (사운드 소스 링크, 테라리움 상세보기)
3. 나머지 아이템은 톤을 죽여서 정보의 밀도를 낮춘다
2. 이벤트에 대한 구조
사실 구조라고 할만한 것도 없지만, 대략 기능으로 나누어보면 아래와 같이 정리가 됩니다. '아이템 선택' 액션에 대응하는 myFunction(소스에서는 Frame_move)이 대부분의 작업을 하는데요, 이것저것 일괄로 적용해야할 것들을 다 넣고, 사용자가 어떤 아이템을 선택했는가에 따라 변수를 넣고, 그것에 맞게 열심히 움직이고 정보를 바꾸게 되어있습니다. 예를 들어서, 첫 번째 아이템을 선택하면 카드가 첫 번째 아이템 위치로 이동하고, 첫 번째 아이템의 타이틀의 opacity가 1로 되고, 'See details'링크의 주소가 변경되고 하는 식이죠. 물론 두 번째 아이템을 선택하면, 그때 지정한 변수에 따라 위의 내용이 착착 바뀌게 되겠죠.
3. 프로토타입 코딩 작업
프로그래밍을 정식으로 배운 적 없이 필요할 때마다 이것저것 찾아서 익히다보니 코드는 깔끔하지는 않습니다. (여긴 언제나 대충 넘어감)
프로토타이핑과, 소스를 보시면 됩니다.
아, 이번에 제대로 처음 시도해본 것이 있는데, Framer에서 사운드파일을 재생하는 것입니다. 아주 상세한 기능이 제공되지는 않지만, 정말 간단하게 사용할 수 있습니다.
# 사운드 플레이
audio = new Audio
audio.volume = 1
audio.src = "사운드 파일 주소"
audio.play()
audio.loop = true
혹시 사운드 재생에 대해 궁금하신 분은 아래 링크를 참조해보세요.
https://github.com/benjamindenboer/Framer-AudioPlayer
https://blog.framer.com/visualizing-sound-with-framer-b1d834131c22#.jti2z49kx
https://www.w3schools.com/tags/ref_av_dom.asp
그리고 사용자 함수를 설정하고, 한 이벤트에 여러 변수를 설정하는건 아래와 같이 하시면 됩니다. 이것도 모르고 있었습니다..
# 함수 정의
Frame_move = (AA,BB,CC) ->
object.opacity = AA
object.x = BB
object.visible = CC
# 이벤트 설정, 함수 실행
object.onClick (event, layer) ->
myFunction(변수A,변수B,변수C...)
코딩부분을 열심히 설명드리지 못했지만... 저같은 초보분들은 서로 소스를 보며 익히는 것이라 생각하며.
4. 마치며
아직 모든 것이 완벽히 마무리되었다고 생각되지는 않아서, 관심이 유지된다면 계속 아이디어를 수정하고 디테일을 손보며 완성을 하게 되지 않을까 생각합니다. 실제로 만들 생각이 있어서 빠르게 프로토타이핑을 해본 것이었는데, 오후 내내 만지작 거린 것을 보면 바로 웹으로 만들기를 시도했어도 좋겠다는 생각이 듭니다. Framer는 모바일용 디자인을 하고 보기엔 딱 좋은데, 일반 웹에 대해 해보기에는 제한이 많네요. 특히 Sketch 파일을 임포트해서 쓰다보니, 크기를 고정해놓은 채로 작업을 하게 되고요.
다음에는 진짜 웹으로 만들어서 공유할 수 있기를!
