• 목록

The 5th 1850mm

http://www.1850mm.com

사람의 다섯 가지 감각(五感) 중 시각(視覺), 청각(聽覺)은 홈페이지를 통해 만족할 수 있다는 생각에서 시작했다. 

시각(視覺)은 영상과 사진을 통해서. 청각(聽覺)은 음악을 통해서. 

이번 홈페이지 타이틀은 "the 5th, 1850mm"이다. 

디자이너로 다섯 번째 개인 홈페이지이며 1850mm은 내 키다.

처음엔 음악과 사진으로만 연출하고자 하였으나 음악 파일의 웹사이트 사용은 저작권 문제가 복잡해 포기했다. 

대안으로 유튜브 영상을 끌어와 Full screen으로 재생하는 방법을 선택했다. 

내가 좋아하고 원하는 음악 위주로 유튜브에서 찾기 시작했고 그 결과 음악 파일만큼은 아니지만 대체로 만족했다. 

오히려 영상이 비쥬얼 영역을 더 돋보이게 하는 효과가 생겼다.

브라우저를 닫기 전까지 랜덤으로 영상과 음악이 재생되며 내가 등록한 코드 갯수만큼 무한대로 재생이 가능하게끔 만들었다. 

하단 버튼은 처음 랜덤으로 뿌려질 때 앞에서부터 20개의 영상 재생 버튼이며 20개 이후에는 처음 랜덤으로 뿌려진 21번째부터 N번째까지의 영상이 재생된다. 

더 생생한 느낌을 연출하기 위해 실제 음과 연동되는 하단의 Equalizer 와 Note symbols. 

음표에는 css로 모션을 추가했다.

Dslr로 찍은 사진이라면 화질 걱정 없이 감성적인 느낌으로 연출이 가능하지만 내가 보여주고 싶은 사진이 오래된 사진들이다 보니 사진 사이즈가 작고 화질도 안좋았다. 

상업적 디자인이라면 이미 사진 선별에서부터 탈락될 사진들이었지만 내 홈페이지다 보니 내 맘대로. 

그래도 최대한 컨셉에 맞게끔 연출하려 노력했다. 

풀스크린으로 연출된 영상, 이미지는 시인성(視認性)을 위해 사진과 영상 Opacity를 80%로 다운시켰으며 이미지 위에는 Pattern을 사용하여 감각적인 느낌을 주는 효과와 저화질 사진의 핸디캡을 조금이나마 줄였다.

게시판 또한 사용자의 시인성(視認性), 사용성(使用性)을 해치지 않는 선에서 구성하였으며 정보 전달성(傳達性) 또한 떨어지지 않는데 촛점을 두었다. 

게시물은 Pantone Color를 사용하여 랜덤으로 출력되게 만들었으며 팬턴 컬러 코드도 같이 출력이 된다. 

Portfolio는 정리중이며 2개 섹션의 썸네일 이미지를 클릭하면 상세 구성 페이지를 보여준다. 

Device 별 Customizing은 총 5단 반응형으로 구성했다. 

가장 아쉬운 부분은 영상 하단에 광고가 나오는 부분이다. 

오픈 API tubular 를 사용하고 있는데 2개 이상의 영상부터 광고가 나온다. 

해결하고 싶지만 모자란 나의 실력, 경준이형의 실력 ㅎㅎ