웹디자인 따라하기 7개의 기법 – icelandicexplorer.com

웹디자인 따라하기 - www.icelandicexplorer.com
랜딩 페이지

자 오늘 함께 웹디자인 따라하기를 해 볼 웹사이트는 Awwwards의 오늘의 사이트에 선정된 Gunnar Freyr라는 사진사의 개인 웹사이트입니다.

백문이 불여일견! 웹사이트 방문하기

가장 중요하게 따라해볼 점은 가장 밑에 있습니다.

웹디자인 따라하기: 전체적인 구성

슬라이드 형태를 띄고 있지만 Fullpage.js같이 한장 한장 넘기는 형식이 아니라 일반적인 스크롤이 가능한 페이지 레아웃을 가지고 있습니다.

전체화면의 슬라이드에 작가의 사진들을 넣었습니다. 이미지가 굉장히 많은 웹페이지입니다. 각 슬라이드의 또한 모두 다르고 개성이 넘쳐서 자칫 지겨워질 수 있는 이미지들의 연속을 흥미롭게 배열 했습니다.

웹디자인 따라하기: 글꼴

웹사이트의 백미인 글꼴을 보도록 합시다.

2021년 현재 유행하는 Serif형 글꼴이 아닌 모던하고 깔끔한 Sans Serif를 사용했습니다. 웹사이트내의 글꼴의 크기가 들쭉 날쭉한데 이는 개성이라면 개성이고 결벽증이 있는 디자이너나 유저에겐 고통일 수가 있겠습니다.

전체적으로 굉장히 낮은 문단 높이를 사용해서 모던한 느낌을 주지만 어떤 면에서는 굉장히 읽기가 거북한 것이 아쉬웠습니다.

Hellix 링크
Scto Grotesk 링크
이 웹사이트의 아쉬운 부분 중하나가 이미지 색에 잠겨지는 메뉴입니다. 굉장히 작아서 눈에 띄지 않습니다만 메뉴가 있을만한 곳에 자리잡고 있어서 일부로 작게 만든 것일 수도 있겠습니다.
로고인 경우 SVG이미지 이고 Scto Grotesk를 사용했습니다. 이탤릭의 F가 돋도이네요.
슬라이드 제목과 부제의 line height는 역시 1이하가 깔끔한 효과를 냅니다.
하지만 이러한 line height는 읽기에는 다소 불편한 면이 있네요. 블로그에 사용된 font-size: 1.6em
자기 소개 페이지에 사용된 font-size: 1.6em
모바일에 사용된
font-size: calc(.72vh + 1rem);

웹디자인 따라하기 1. 흰바탕의 파비콘

이 웹사이트의 파비콘은 흰색 바탕의 동그라미에 작가의 이니셜을 넣은 형태입니다. 이런 흰색바탕을 일부로 넣는 것은 브라우저의 다크모드를 감안해서 만든 듯 합니다. 보통 하얀색 바탕의 파비콘은 투명한 이미지를 넣지 않은 실수라는 느낌을 주는데 이렇게 동그랗게 잘라서 올리면 의도한 것으로 보이게 되면서 더 멋지게 보이는 것 같습니다.

브라우저의 다크모드 때문에 어두운 색의 파비콘이 보이지 않을 경우가 많아 속상하신 분들에게 좋은 솔루션일 듯 합니다.

웹디자인 따라하기 2. 도형속에 넣은 Parallax 이미지

이 웹사이트의 가장 인상이 깊었던 부분 중 하나인데요. 스크롤을 하면서 도형속에 들어간 이미지가 Parallax로 움직인다는 겁니다. 이미지 주위에 놓여진 색이 이미지와 어울리는 짙은 회색이네요. 여기서 사용된 타원형의 모양은 밑에서 다시 거론 되지만 굉장히 중요합니다.

웹디자인 따라하기 3. 이미지 위에 그대로 놓인 더 작은 이미지

이미지 위에 더 작은 타원형 이미지를 놓으면 배경과 잘 구분이 안가고 어지러운 느낌을 줘서 흔히 볼 수가 없는 구조라 보자마자 어?하고 눈길이 가게 되더군요. “다음 이미지”를 저렇게 썸내일 형식으로 배경화면 위에 그대로 놓았습니다. 그리고 각각의 이미지의 색조와 명암을 잘 선택하여 위에서 말한 위화감이 적어지고 오히려 멋진 효과가 되었네요.

이 웹사이트에서 또 하나의 아주 인상 깊었던 트렌지션 효과

웹디자인 따라하기 4. 웹사이트의 정체성이 되어주는 특정한 모양

위에서 보인 길쭉한 타원형의 모양을 이 웹사이트에서는 자주 보는데요. 이러한 도형은 웹사이트 디자인에 특수한 정체성을 부여해줍니다. 아주 은근하게 몇번만 사용하는 것이 좋겠지요. 너무 많이 대놓고 사용하면 꼴맞춤이 되겠지요.

웹디자인 따라하기 5. 흐르는 갤러리

겔러리를 직접 스크롤하는 것도 좋지만 이렇게 자동으로 은은하게 이미지를 흐르듯 돌려주는 것도 참 좋은것 같습니다. 이미지를 호버하면 흐름은 잠시 멈추네요. 더 빨리 좌우로 움직일 수 없는데 그것에 대한 해결책으로 “All Projects”페이지로 갈 수 있게 해놨습니다.

웹디자인 따라하기 6. 많이 떨어진 인용 따옴표

보통 따옴표를 사용해서 중용한 문장이나 인용한 문장을 부각시키는데요. 그 따옴표가 꼭 문장 옆에 꼭 붙어 있으라는 법이 없습니다. 이 웹사이트에서는 따옴표가 확 떨어져 있네요.

웹디자인 따라하기 7: 버튼 하나로 느낌이 확 달라진다!!!

아이슬란드 사진작가를 위해서 만들어서 인가요. 버튼 하나로 이 웹사이트는 북유럽의 전설 늑대인간(Werewolf)을 방불캐하는 환골탈퇴를 할 수 았습니다. 바로 페이지의 우측 상단에 있는 이 버튼을 누르면 글자가 모두 사라지고 이미지만 보시게 됩니다.

문자를 없애주고 이미지만 감상하는 것도 운치가 있는 일이죠. 이런 모드를 제공하면 자칫 밋밋하고 재미없을 수도 있는 사진작가 포트폴리오를 신박함의 차원으로 끌어올립니다.

끝맺으며

전체적으로 멋진 웹사이트였습니다. 다만 들쭉 날쭉한 글꼴과 가끔 튀어나온 저 해상도 이미지가 아쉬웠습니다. 그런 점을 제쳐두면 굉장히 깔끔한 웹사이트였습니다.

답글 남기기