홈페이지와 유튜브 연결하기 — 같은 풍경, 이어지는 음악과 이야기

이번 홈페이지와 유튜브 연결하기 작업은 Rain on Porcelain의 음악과 제작 이야기를 자연스럽게 이어주기 위해 시작했습니다.

Rain on Porcelain의 음악은 유튜브에, 음악을 만드는 과정과 운영 기록은 홈페이지에 쌓이고 있습니다. 처음에는 각 공간을 만드는 일에 집중했습니다. 유튜브에 영상을 올리고, 홈페이지에 글을 쓰고, 필요한 메뉴와 페이지를 하나씩 갖추는 것만으로도 할 일이 많았습니다.

그렇게 콘텐츠가 조금씩 늘어나자 두 공간의 연결이 눈에 들어오기 시작했습니다. 유튜브에서 음악을 듣던 분이 홈페이지에 찾아왔을 때, 혹은 글을 읽던 분이 음악을 들어보고 싶어졌을 때 그 흐름이 자연스럽게 이어지고 있을까?

앞서 유튜브 채널에 홈페이지를 소개해 둔 데 이어, 이번에는 홈페이지에서 음악을 듣고 채널로 이동할 수 있도록 첫 화면을 다듬었습니다.

홈페이지와 유튜브 연결하기 — 배경 이미지부터 통일

먼저 홈페이지 첫 화면의 배경을 유튜브 채널의 배경 이미지와 통일했습니다.

같은 이름과 로고를 사용하더라도 화면을 채우는 이미지가 다르면 공간의 인상은 꽤 달라집니다. 채널에서 보았던 풍경이 홈페이지에서도 이어진다면, 별도의 설명 없이도 같은 Rain on Porcelain의 공간이라는 느낌을 줄 수 있을 것 같았습니다.

배경을 바꾸고 나니 그 위에 놓인 소개 문장과 버튼도 다시 보였습니다. Rain on Porcelain이라는 이름에 담긴 느낌이 첫 화면에서 전해지도록 문장을 다듬고, 버튼의 크기와 배치도 조정했습니다.

PC에서 괜찮아 보이던 문장이 모바일에서는 여러 줄로 길게 나뉘기도 했습니다. 같은 이미지를 사용해도 화면 비율에 따라 보이는 부분이 달라졌고, 버튼도 작은 화면에서는 다른 균형이 필요했습니다. 이미지를 교체하는 것으로 끝날 줄 알았던 작업이 자연스럽게 첫 화면 전체를 살피는 일로 이어졌습니다.

홈페이지에서도 음악을 들어볼 수 있도록

홈페이지와 유튜브 연결하기에서 중요한 것은 방문자가 음악을 바로 들어볼 수 있게 하는 일이었습니다. 홈페이지가 음악을 소개하는 공간인 만큼, 글을 읽다가 직접 감상할 수 있도록 유튜브 영상을 넣었습니다.

앨범에 대한 설명을 읽는 것과 실제로 음악을 듣는 것은 다른 경험입니다. 재생 버튼을 눌러 잠시 들어보는 편이 Rain on Porcelain이 어떤 음악을 만드는지 더 직접적으로 전해줄 수 있습니다.

처음 영상을 넣었을 때는 화면을 너무 크게 차지했습니다. 음악을 들어볼 수 있는 자리를 만들고 싶었는데, 영상이 주변의 내용보다 지나치게 두드러져 보였습니다. 크기를 줄이고 배치를 확인하면서 홈페이지의 다른 요소들과 어울리는 정도로 조정했습니다.

방문자가 원할 때 음악을 재생하고, 관심이 생기면 유튜브에서 다른 앨범까지 찾아볼 수 있도록 연결점을 하나 만든 셈입니다.

더 많은 앨범은 Rain on Porcelain 유튜브 채널에서 감상하실 수 있습니다.

구독 버튼 하나도 홈페이지의 일부로

영상과 함께 유튜브 구독으로 연결되는 버튼도 추가했습니다. 음악이 마음에 들었을 때 다음 행동으로 이어질 수 있는 길을 가까이에 두고 싶었습니다.

기능만 보면 링크를 연결하는 간단한 작업이지만, 막상 화면에 놓고 보니 버튼의 디자인이 신경 쓰였습니다. 기존 버튼들과 모양이나 색감이 다르면 새로 붙인 요소만 따로 떠 있는 것처럼 보였기 때문입니다.

그래서 홈페이지에서 사용하던 버튼 스타일에 맞춰 조정했습니다. 평소에는 윤곽선이 보이고, 마우스를 올리면 금빛 계열로 채워지는 표현도 함께 맞췄습니다.

작은 버튼 하나였지만, 이런 부분이 모여 홈페이지의 전체적인 인상을 만든다는 것을 다시 느꼈습니다.

음악에서 이야기로, 이야기에서 음악으로

첫 화면에서 글로 이동하는 버튼의 목적지도 다시 확인했습니다. 버튼을 눌렀을 때 방문자가 기대하는 내용을 바로 만날 수 있는지가 중요했습니다.

음악에 담긴 이야기가 궁금한 분은 앨범 제작기와 이야기를 찾아보고, 제작 도구나 작업 방식이 궁금한 분은 Creator Lab의 관련 글들을 살펴볼 수 있도록 연결을 정리했습니다.

그동안 추가했던 검색창과 공유 버튼, 모바일 여백 조정도 비슷한 목적의 작업이었습니다. 글이 쌓일수록 원하는 내용을 찾기 쉬워야 하고, 작은 화면에서도 편하게 읽을 수 있어야 했습니다.

이제는 첫 화면에서 음악을 듣고, 관련 이야기를 읽고, 다시 채널로 이동하는 흐름까지 조금씩 생각하게 됩니다. 홈페이지에 무엇을 더 넣을지뿐 아니라, 이미 있는 콘텐츠 사이를 어떻게 이어줄지도 운영의 일부가 되었습니다.

유튜브에서도 홈페이지를 소개하기

유튜브 채널에서는 앞서 소개 문구와 홈페이지 안내를 정리해 두었습니다. 채널에서는 음악을 듣고, 홈페이지에서는 앨범 제작기와 작업 기록을 읽을 수 있다는 점을 담아, 음악 뒤의 이야기가 궁금한 분들이 찾아올 수 있도록 했습니다.

이번 홈페이지 수정은 그 연결을 반대쪽에서도 이어주는 작업이었습니다. 유튜브에서 홈페이지를 안내한 데 이어, 이제 홈페이지에서도 음악을 들어보고 채널로 이동할 수 있는 길을 다듬었습니다.

이 과정에서 채널 소개와 여러 언어의 정보를 관리하는 작업도 이어졌습니다. 관련 도구를 만든 과정은 앞서 올린 채널 로컬라이제이션 업로더 제작기에 정리해 두었습니다.

도구를 만드는 일과 홈페이지를 다듬는 일은 서로 다른 작업처럼 보이지만, 이번에는 같은 목적을 향하고 있었습니다. 어느 언어로 채널을 접하든 Rain on Porcelain이 어떤 공간인지 이해하고, 관심이 생기면 음악 뒤의 이야기까지 찾아올 수 있게 하는 것입니다.

작은 연결을 하나씩 만드는 중

이번 홈페이지와 유튜브 연결하기 작업이 실제 방문이나 구독 증가로 이어질지는 아직 알 수 없습니다. 배경 이미지를 맞추고, 영상을 넣고, 버튼과 소개 문구를 조정한 결과는 시간을 두고 지켜보려 합니다.

다만 이번 작업을 통해 두 공간의 역할은 조금 더 분명해졌습니다. 유튜브에는 들을 음악이 있고, 홈페이지에는 그 음악을 만들며 남긴 이야기가 있습니다. 같은 풍경으로 시작해 서로 다른 내용을 만날 수 있는 공간이 되었으면 합니다.

앞으로 새로운 앨범과 글이 쌓일 때도, 각각을 올리는 데서 한 걸음 더 나아가 그 사이의 연결을 살펴보려 합니다. 음악을 듣다가 이야기가 궁금해지고, 이야기를 읽다가 다시 음악을 틀어보게 되는 것. Rain on Porcelain의 홈페이지를 그런 공간으로 조금씩 다듬어 가고 있습니다.