웹디자인 따라하기 10가지 기법 – ripeplanet.com

웹디자인 따라하기 기법 - ripeplanet.com
ripeplanet.com

오늘도 Awwwards.com에서 선정한 오늘의 웹사이트 중에서 하나를 뽑아서 따라해봄직한 웹디자인 기법들을 함께 살펴보도록 하겠습니다.

오늘의 주인공은 ripeplanet.com이 되겠습니다. 백문이 불여일견! 웹사이트 방문해 보기

항상 그렇지만 가장 멋진 효과는 맨마지막에 소개해봤습니다.

전체적인 구조

내용이 많지 않은 웹사이트를 덜 썰렁하게 만들면서 꽉 채워주는 것은 매우 어렵습니다. 대부분의 중소기업 웹사이트들이 그러할 때가 많습니다. 그것도 그런 것이 장황하게 유저들을 지겹게 붙잡고 싶어 하지 않는 기업들도 많거든요. 짧은 시간 안에 굵고 빠르고 깔끔하게 브랜드의 이미지와 내용을 전달하는 것이 매우 중요합니다.

이 웹사이트도 내용이 많지가 않아서 페이지도 정확히 4개 밖에 없지요. 전체 화면으로 열리는 메뉴는 그래서 이 메뉴들의 글씨를 크게 해서 부각시켰습니다.

글꼴

메인 글꼴 National 2

National 2 링크

웹디자인 따라하기 1: 문자 선택 배경색을 따로 만들자

문자를 선택할 때 색이 선택된 부분의 배경색을 커스터마이징 하는 것이 2021년 현재의 추세입니다. 이걸 안한 웹사이트를 보기 힘들 정도 입니다. 개인적으로 웹사이트를 뜯어볼 때 텍스트 선택을 꼭 해봅니다.

웹디자인 따라하기 2: 큼직큼직한 아래로 가기 화살표

2021년에는 뭐든지 큼직큼직하게 만드는 것이 대세입니다. 여기서는 아래로 가기 화살표가 큼직하게 만들어져있네요.

물론 깨알같은 애니메이션은 덤입니다.

웹디자인 따라하기 3: 밑에서 솟아 오르는 큼직큼직 페이지 타이틀

2020년부터 큼직큼직한 타이틀은 대세가 되었습니다. 큼직한 타이틀이 없는 웹사이트를 보기가 어려울 정도가 되었네요. 이 웹사이트에서도 시원시원한 큰 타이틀을 사용했는데요. 여기에 글자가 솟아오르는 애니메이션을 사용해서 그냥 떡하니 있는 것보다 생동감 있는 느낌을 주었습니다.

font-size: 12.6389vw;

웹디자인 따라하기 4: 마우스로 좌우로 끌 수 있는 슬라이드

이 웹사이트에서 인터렉션이 되는 유일한 부분입니다. 슬라이드 버튼 3개가 큼직하고 넓게 좌우로 배치되었습니다. 슬라이드가 바뀔 때마다 이미지와 로고의 애니메이션이 눈에 띕니다.

좌우로 끌지 않을 때는 이렇게 타이머가 작동해서 자동으로 슬라이드가 바뀝니다.
빨간색 버튼을 마우스로 좌우로 끌면서 슬라이드를 바꿀 수 있습니다.

웹디자인 따라하기 5: 새로고침 없는 페이지 전환 에니메이션

2021년 지금 이런 전시용 웹사이트의 99%가 새로고침이 없이 페이지 전환을 하는 것 같습니다. 그리고 이동할 때 에니메이션을 사용하는 것이 일반적이구요. 이 웹사이트의 에니메이션은 왼쪽으로 슬라이딩 하는 듯한 느낌의 에니메이션입니다.

웹디자인 따라하기 6: 이미지와 오버래핑되는 문자는 글의 윤곽만 남기는 효과

문자가 이미지와 오버래핑될 때 효과를 넣으면 참 좋습니다. 여기서는 문자가 이미지와 오버래핑 되는 부분의 글씨는 윤곽만 남기는 효과를 주었습니다.

거기다 Parallax효과를 추가하면 더욱 좋습니다.

웹디자인 따라하기 7: 깨알같은 로고 애니메이션

스크롤을 하면 뜨는 도형 애니메이션입니다. 회사의 로고입니다.

웹디자인 따라하기 8: 페이지의 일부분인 듯한 Footer

푸터를 하나의 독립된 요소로 설계를 많이 하지요. 아주 간결하고 작게 만들거나 배경색을 다르게 하거나 해서 “나 푸터요”하고 말하듯이 따로 때놓는데요. 이 웹사이트에서는 푸터를 자연스러운 페이지 섹션의 일부분 처럼 느껴지게 만들었어요. 물론 푸터가 크기도 해서 뭐든지 큼직큼직하게 만드는 2021년의 추세 중 일부인 듯합니다.

웹디자인 따라하기 10: 화면 높이 보다 높은 이미지와 Parallax

큼직한 글자와 마찬가지로 이 웹사이트의 이미지들도 시원스럽게 큽니다. 그중 눈길을 끄는 것은 화면 높이 보다 더 높은 이미지입니다. 여기다 Parallax효과를 주어서 더욱 멋집니다.

웹디자인 따라하기 10: 은은하게 움직이는 배경

이 웹사이트에서 가장 눈길이 가는 효과중 하나입니다. 지형을 나타내는 듯한 흰색선이 무작위로 스믈스믈 모양을 바꿉니다. 이렇게 의도된 작은 디테일 정말 좋습니다.

기타: 개발자의 시그니쳐를 DOM에 숨겨 놓기

브라우저의 요소 검사를 할 때 개발자의 로고와 사이트를 보이게 만들었습니다. 개발자로서 이런식의 PR은 언제나봐도 멋집니다. 뭔가 이스터 애그를 찾은 기분이네요.

답글 남기기