홈페이지 메인비주얼 디자인 방식

일을 하다가 보면 다양한 종류의 사진을 메인비주얼 부분에 넣어야 하는 상황이 많다.

내가 일하고 있는 회사는 상업적인 홈페이지를 다루는 곳이 아니라, 학술대회, 학회와 같은 부분이 대부분이라서 화려한 기술로 비주얼을 화려하게 꾸미기 보다는 보기좋게 편집해서 반영해 놓으면 되는데, 사실 그 반영하는 형식에도 고민이 될때가 많다.

그래서 여기에 홈페이지의 메인비주얼 디자인 방식을 몇가지 정리해두려고 한다.

1.이미지를 확대해서 꽉 채우는 기본형

일반적으로 홈페이지가 가로로 긴 가로형으로 많이 반영이 되기때문에, 제일 기본적이고 일반적으로 쓰는 방법은 비율에 맞는 사진을 꽉 채워서 넣는 방식이다. 물론 위에 얹어지는 텍스트와도 잘 어우러지고 이미지 자체가 깔끔하면서 주제에 맞는 사진이라는 전제하에 말이다. 이미지가 이렇게 시원하게 들어가면 홈페이지 규모도 커보이고 좋다. 그런데 이런 경우는 거의 없다는게 아쉽긴하지만 말이다.

2.배경은 단색 혹은 패턴으로 채워넣고 위에 이미지를 얹는 형식

보통 1번처럼 이미지를 쭉 확대하다보면 필요이상으로 커지는 부분때문에 보기 좋지 않은 경우가 많다. 그럼 이미지의 크기는 적당히 줄이고 남는 배경부분은 이미지의 베이스색에 맞춰 단색으로 깔아주거나, 무채색으로 깔아주거나, 허전해 보일시에는 어울리는 패턴으로 채워넣은 뒤, 포인트가 될 이미지를 위에 얹어서 경계부분은 브러쉬로 어색하지 않게 살살 지워주는 형식이다.

3.배경에 이미지를 확대해서 꽉 채워넣고 흑백, 블러처리 후에 이미지 얹는 형식

2번과 거의 비슷한 방법이긴 한데, 이건 배경을 단색처리하지 않고 위에 얹어주는 이미지를 크게해서 꽉 채운 후 흑백 + 투명도처리 + 블러처리 한 후에 이미지를 얹어주는 형식이다. 위에 얹어주는 이미지는 2번처럼 경계를 흐리게 지워줘도 좋고 아니면 포인트가 될 사물이 있다면 누끼를 따서 얹어주면 보다 깔끔하다.

4.분할 혹은 모자이크 형식

이미지는 많은데 홈페이지 틀에 맞지않는 세로형이거나 비율이 당최 나오지가 않는다면 도형으로 딱딱 나눠서 나열해 주는것도 방법이다. 이건 사실 나도 실무에서 작업하면서 제대로 이쁘게 만드는게 어려운 형식인데 잘 만들어놓으면 꽤 있어보이고 정돈되어 보이는 방법이니 자료 많을때 한번씩 활용할만 하다. 모자이크식으로 나열해놓고 일부 사진 부분만 흑백+블러 처리 해놓으면 과하지 않으면서 적절히 좋아보일 수 있다.

5.이미지 양쪽 끝부분은 X자로 잘라놓고 자연스럽게 얹기

이건 쓰다보니 3번의 연장선상 같은데 이미지 얹을시에 좀 더 자연스럽게 얹는 방법이기도 하다. 낯설어서 호불호가 있을지는 모르겠는데, 위에 얹어줄 이미지 끝부분을 X자, 모래시계 형태로 만들어서 그 부분과 크게 확대해놓은 배경부분은 흑백처리 하는거다. 

이 외에도 여러가지 방법이 있겠지만 우선 여기까지만 정리하며 글을 마친다.