개발
꼭 한번 따라하고 싶은 원페이지 사이트 13곳
11분
2021.01.08.14.4K
1. 오울태스틱(Owltastic)
오울태스틱은 세련되면서도 매력적인 원페이지 웹사이트로, 이곳이 제공하는 서비스를 간단하게 설명하고 있습니다. 이곳에서 볼 수 있는 문구는 밝고 개인적이며 아주 자신감에 넘쳐서, 일반적인 기업용 웹사이트에 비해서 상당히 두드러져 보입니다. 만약 잠재적인 고객들이 이곳이 제공하는 서비스에 관심이 생긴다면, “어떠신가요? 저와 함께 대화하시죠!”라는 CTA 버튼을 클릭해서 쉽게 연락할 수 있습니다. 만약 첫 화면에서 그다지 깊은 인상을 받지 못했다면, 화면의 아래쪽으로 내려가서 비즈니스 오너인 메건 피셔(Meagan Fisher)에 대한 추가적인 정보를 확인할 수 있습니다. 이곳에서도 그녀와 연락할 수 있는 CTA 버튼을 하나 발견할 수 있는데, 그 문구는 “저와 함께 일하시죠!”입니다.
이 웹사이트에서는 그녀의 독특한 매력이 무엇인지 설명하고 있는데, 그것은 바로 그녀가 디자이너이자 개발자로 일한다는 것이며, 이는 흔히 찾아볼 수 없는 사례입니다. 그녀는 또한 자신이 인지도와 명성이 높은 대기업들과도 오래 일하면서 많은 경력을 쌓았다고 말합니다. 그녀가 제공하는 포트폴리오는 체계적이며 깔끔한 방식으로 정렬되어 있습니다. 여기에서 보여주는 세 가지의 사례를 통해서 우리는 그녀가 다재다능하다는 것을 알 수 있습니다. 그녀의 웹사이트에서 효과적인 요소들은 그 외에도 다음과 같습니다.
- 어보브 더 폴드(Above the fold) 부분이 아름다우며, 마이크로 애니메이션을 활용해서 사용자들의 관심을 끌고 있습니다.
- 다른 추가적인 페이지가 없으며, 사이트를 방문한 사람들이 그녀가 작업했던 사례들을 확인하고 싶다면 미디엄(Medium)에 있는 포트폴리오를 확인할 수 있어서 그녀를 더욱 신뢰할 수 있게 해줍니다.
- 사이트의 원래 목적 이외에 집중을 방해하는 것이 전혀 없습니다.
- 모든 구성요소들이 개인의 스타일에 맞춰서 만들어져 있습니다.
- 마이크로 애니메이션이나 점성술을 연상시키는 배경, 그리고 부엉이와 밤 시간 등을 표현하는 디자인 등 트렌디한 요소들을 사용했습니다.
- 이 웹사이트의 가장 훌륭한 점은 그녀의 개성과 역량을 모두 보여주는 명확하면서도 간결한 메시지를 전달하고 있다는 것입니다. 그리고 이런 메시지가 그에 어울리는 완벽한 CTA로 연결되고 있습니다.
2. 고딜스 앤 윌리스(Gordils & Willis)
고딜스 앤 윌리스는 방대한 양의 디자인 서비스를 제공하는 디지털 스튜디오입니다. 원페이지인 이 웹사이트는 자신들의 디자인 프로세스를 자세하게 설명하고 있는 것이 두드러집니다. 이들은 또한 디자인 전반에서 개체들이 변하는 마이크로 애니메이션을 사용하고 있는데, 이 때문에 방문객들은 콘텐츠에 더욱 집중할 수 있게 됩니다. 이들 디자인 스튜디오의 목표는 어보브 더 폴더에서 볼 수 있어서, 사이트를 방문한 사람들은 그들이 누구인지에 대해서 쉽게 이해할 수 있습니다.
이들 디자인 스튜디오에 대한 아주 짧은 설명은 페이지의 상단에 배치되어 있습니다. 이 페이지의 전반에 걸쳐서 확인할 수 있는 개체들은 창의성에 초점을 맞춘 이 웹사이트의 주된 콘셉트를 반영하고 있습니다. 이 웹사이트의 가장 훌륭한 점은 공백을 아주 잘 활용하고 있다는 것입니다. 사이트가 관련 정보들로 가득 채워져 있기는 하지만, 페이지의 구성요소들이 그다지 번잡하게 보이지도 않습니다.3. 브랜드메이커스(BRNDMKRS)
브랜드메이커스는 웹사이트 디자인 및 전략기업으로, 이들이 제공하는 모든 서비스를 단 하나의 페이지에서 보여주고 있습니다. 이 웹사이트의 디자인에서 주목할 만한 점은, 자신들이 누구이며 웹사이트를 디자인할 때 어떤 프로세스를 활용하는지를 동영상을 통해서 보여주고 있다는 것입니다. 관련 동영상은 깔끔하면서도 효과적입니다. 또한 고객이 서비스에 대한 견적을 계산해볼 수 있는 체크리스트를 제공하고 있다는 점도 이 사이트의 독특한 점입니다. 그들이 이런 기능을 포함시켜 놓은 이유는 잠재적인 고객들이 정직과 투명성을 높이 평가한다고 생각하기 때문입니다.
이들은 또한 고객의 시간을 소중하게 여기고 있다는 점을 확실히 밝히고 있습니다. 페이지의 전반을 통해서 보여주고 있는 메시지는 대담하면서도 명확하기 때문에, 잠재적인 고객들은 거래를 결정하는 데 필요한 모든 정보들을 얻을 수 있습니다.4. 히메나 벤고에체아(Ximena Vengoechea)
히메나 벤고에체아는 매우 단순하고 깔끔한 웹사이트로, 일러스트레이션을 대중적이면서도 다른 것들과 두드러져 보이게 만드는 것에 초점을 맞추고 있습니다. 이곳의 일러스트레이션들은 그녀의 개성과 함께 그녀가 살아온 여정에 대한 내용도 전달해주고 있습니다. 이 웹사이트를 살펴보다 보면, 깔끔한 디자인을 위해서 공백을 아주 잘 활용하고 있다는 것을 알 수 있습니다. 메뉴 아이템을 찾기가 정말 쉽기 때문에, 사이트의 네비게이션이 아주 간편합니다. 그녀는 사이트 전반에 걸쳐서 맞춤형의 일러스트레이션을 아주 많이 활용하고 있는데, 사이트의 다양한 하위 페이지에서도 그녀의 손길을 쉽게 찾아볼 수 있습니다.5. 조슈아 매카트니(Joshua McCartney)
조슈아 매카트니는 프리랜서 예술감독으로 매우 창의적인 개인 웹사이트를 갖고 있습니다. 이 웹사이트는 유머러스한 이미지를 통해서 사용자들의 관심을 순식간에 사로잡습니다. 이러한 이미지를 통해서 그의 개성이 즉시 전달되는데, 이러한 요소는 예술감독을 찾고 있는 잠재 고객들이 원하는 것입니다. 그가 작업했던 프로젝트의 목록은 같은 페이지에 있는 다양한 탭으로 체계적으로 정리되어 있는데, 여기에는 일반 디자인, UI/UX 디자인, 모션 그래픽, 모든 프로젝트 보기, 비디오 등의 탭이 있습니다.
이 사이트를 살펴보다 보면, 전체적인 디자인이 원활하게 작동하게 만들어주는 특유의 역량이 상당하다는 것을 발견할 수 있습니다. 이 웹사이트의 운영자는 또한 “작업”과 “나에 대해서”라는 단 두 개의 페이지만으로 모든 것을 간단하게 표현하고 있습니다. 재미있으면서도 활기 넘치는 개인 웹사이트를 만들고 싶다면, 아마도 이 사이트가 가장 훌륭한 사례가 될 것입니다.6. 아나 산토스(Ana Santos)
아나 산토스는 친숙하면서도 매력적인 간단한 웹사이트입니다. 이 웹사이트의 운영자는 소규모의 스타트업을 비롯해서 구글과 같은 거대한 테크 기업에 이르기까지 다양한 분야의 수많은 기업들과 작업했던 UX 컨설턴트이자 전문가입니다. 그녀가 제공하는 모든 서비스는 웹사이트의 첫 페이지에 가지런히 표시되어 있어서, 잠재적인 고객들은 사이트의 나머지를 살펴보지 않고도 무엇을 얻을 수 있는지를 쉽게 알 수 있습니다. 색채 조합도 예쁘고 보기 좋아서, 웹사이트가 좀 더 친숙하게 느껴집니다.
이 사이트는 사용자에게 매우 친화적일 뿐만 아니라, UX 디자인도 아주 훌륭합니다. 어보브 더 폴드의 구성요소들은 사이트를 방문하는 사람들에게 그녀가 함께 일했던 기업들을 보여주고 있는데, 이를 통해서 그녀의 전문성을 잘 드러내고 있습니다. 그녀는 또한 다른 UX 디자이너들에게 무료로 교육을 제공하고 있기 때문에, 그녀가 이 분야의 산업에 대한 지식이 풍부하다는 것을 알 수 있습니다. 그녀의 사이트에서 가장 주목할 만한 요소는 “제가 도움을 드릴 수 있는 방식”이라는 섹션인데, 이곳은 네 개의 그룹으로 분류되어 있어서 이곳을 클릭하면 그에 해당하는 각각의 하위 페이지로 연결됩니다.7. 그린 카멜레온(Green Chameleon)
그린 카멜레온은 일련의 미묘한 애니메이션들로 구성된 아름답고 세련된 웹사이트입니다. 페이지의 아래쪽으로 스크롤을 내려가면 이런 애니메이션들을 볼 수 있습니다. 이 페이지는 이들 디자인 팀이 작업한 다양한 프로젝트들을 별도로 구분해서 커다란 헤더 텍스트로 보여주고 있습니다. 이미지들이 정적이지 않고 움직이기 때문에, 요즘 사람들이라면 충분히 매력을 느낄 수 있는 디자인입니다. 그리고 페이지 전반에 걸쳐서 이미지들이 독특한 방식으로 보여지기 때문에, 좀 더 흥미롭게 여겨지기도 합니다. 검은색의 배경은 디자인의 측면에서는 과감한 선택이라고 할 수 있는데, 덕분에 이미지들이 좀 더 두드러져 보일 수 있습니다.8. 멜라니에 다베이드(Melanie Daveid)
멜라니에 다베이드는 사이트 운영자의 이름이 독특한 애니메이션으로 로딩되는 우아한 웹사이트입니다. 이러한 애니메이션이 이곳을 방문한 사람들을 곧바로 맞이하고 있습니다. 여기에서부터 우리는 그녀가 사이트의 특정한 구성요소들을 두드러져 보이게 만들기 위해서 대담하면서도 다양한 색상을 활용하고 있다는 것을 눈치챌 수 있는데, 이로 인해서 페이지의 다른 콘텐츠들을 좀 더 쉽게 읽을 수 있습니다. 프로젝트 위쪽으로 마우스를 가져가면 또다른 애니메이션 효과가 나타납니다. 페이지의 오른쪽에 있는 사이드바를 이용하면 간단하면서도 효율적으로 스크롤을 할 수 있습니다. 사이트 전반에서 볼 수 있는 미묘한 애니메이션 효과를 통해서 이곳의 디자인이 좀 더 흥미로워지고, 이를 통해서 사이트 운영자는 더욱 개성 있는 모습을 보여줄 수 있습니다. 그녀는 또한 자신의 디자인 프로세스를 아주 상세하게 설명하고 있습니다.9. 올리(Ollie)
올리는 매우 독특한 마우스 커서를 가진 단순하면서도 인터랙티브한 웹사이트입니다. 이곳의 커서를 이용하면서 사용자들은 웹사이트를 둘러보면서 재미있는 경험을 할 수 있습니다. 이 웹사이트에서는 페이지에 들어가는 과정에서 독특한 애니메이션이 로딩됩니다. 이러한 미묘한 애니메이션은 웹사이트를 더욱 매력적이고 흥미롭게 만듭니다.
네비게이션 바는 단순하기 때문에, 페이지의 스크롤 기능이 전체적인 디자인에서 벗어나지 않습니다. 다양한 프로젝트를 스크롤 하다 보면, 사용자들은 링크를 클릭했을 때 어떤 일이 벌어지는지를 예상할 수 있습니다. 또한 각각의 프로젝트에서는 이해하기 쉬운 간략한 설명도 제공하고 있습니다. 모든 서비스에는 분명하게 라벨이 표시되어 있는데, 이는 신규 고객들을 유치하는 데 있어서 필수적인 요소입니다.10. 찰리 웨이트(Charlie Waite)
찰리 웨이트는 원페이지의 세련된 개인 웹사이트로 스크롤 방식도 독특하며, “디자이너, 건축가, 남편, 아빠”라고 자신을 한 줄로 소개하고 있습니다. 개인 웹사이트에서는 일과 관련된 정보만 보여줄 필요가 없다는 점을 이해하는 것이 중요합니다. 그가 페이지 전반에 걸쳐서 배치한 색상들은 서로 상당히 대비되고 있는데, 그러한 색상들은 각 콘텐츠의 개성을 잘 보여주고 있습니다.
페이지에 포함되어 있는 추가적인 요소들 중에는 그가 작업하고 있는 웹사이트의 링크와 쉽게 이해할 수 있는 프로젝트, 그리고 페이지의 아래쪽에 있는 추가적인 리소스와 독특한 형태의 즐겨찾기도 있습니다. 디자인은 단순하지만, 모던하면서도 미학적인 매력을 갖고 있습니다.11. 데이비드 가메이크(David Gamache)
데이비드 가메이크는 아마도 여기에서 소개하는 웹사이트 중에서 가장 심플할 것입니다. 중요한 정보들은 모두 페이지에 포함되어 있는데, 그 외에도 비핸스(Behance) 링크, 깃허브(GitHub) 링크, 운영자의 이메일 주소도 있으며, 이미지들도 상당히 세련됩니다. 이 페이지에서 볼 수 있는 유일한 문구는 가메이크가 샌프란시스코의 외곽에 자리를 잡고 있는 디자이너이자 건축가라는 사실입니다. 이러한 유형의 디자인은 여러분이 제공하는 서비스를 몇 개의 단어로 보여줄 수 있다면 아주 효과가 좋을 것입니다.12. 니콜 세이디(Nicole Saidy)
니콜 세이디는 시각적으로 매력적인 웹사이트이며, 아주 미묘한 애니메이션 효과가 사용자들의 흥미를 계속해서 유발하고 있습니다. 페이지의 상단에는 니콜 세이디가 누구이며 무슨 일을 하는지를 명확하게 설명하고 있습니다. 페이지의 텍스트는 서로 다른 아이콘으로 구분되어 있어서, 디자인을 좀 더 체계적으로 만들어줍니다.
그녀는 또한 자신이 했던 작업들의 일부만 모아서 보여주고 있으며, 사용자들이 나머지 작업들을 보려면 버튼을 클릭해서 확인할 수 있습니다. 만약 그녀가 했던 모든 작업들을 한꺼번에 보여주려 했다면, 방문객들이 조금 부담스러웠을 것입니다. 사이트의 색상 역시 일관성을 유지하고 있습니다. 사이트를 살펴보다 보면, 사용자들은 콜투액션(call-to-action)이 명쾌하며, 다양한 소셜미디어 계정들로 연결되는 버튼도 있다는 사실을 알 수 있습니다. 단순하면서도 심플한 디자인에도 불구하고, 이 페이지에서는 다양한 정보들을 제공하고 있습니다.13. 애런 자라비(Aaron Zarabi)
애런 자라비는 코미디언으로 환상적인 개인 웹사이트를 갖고 있습니다. 그의 웹사이트가 훌륭한 이유는 방문객들에게 개인적이면서도 편안한 이미지를 제공하기 때문입니다. 그래서 사이트를 방문하는 사람들이 좀 더 친숙함을 느낄 수 있습니다. 그리고 사이드바도 독특하며 은근한 애니메이션 효과도 찾아볼 수 있습니다. 페이지 전반에 걸쳐서 “팔로우 하기”나 “실시간 방송 시청하기”와 같은 커다란 콜투액션이 포함되어 있습니다. 그리고 이 사이트에서는 흰색, 밝은 회색, 어두운 회색으로 색상을 일관성 있게 사용하고 있는데, 이를 통해서 밝은 색상을 사용할 때 더욱 두드러져 보일 수 있습니다.
지금까지 13가지의 효과적이면서도 다양한 개인 웹사이트를 살펴보았습니다. 전체적인 메시지를 간단명료하게 보여줄 수 있도록, 개인 웹사이트를 디자인 할 수 있는 충분한 영감을 얻었기를 바랍니다. 그리고 아무리 개인 사이트라고 하더라도 웹사이트를 완벽하게 디자인 하려면, 개인 웹사이트를 만드는 데 있어서 많은 경험이 있는 웹사이트 디자인 팀과 협업을 하는 것이 좋습니다.
> 이 글은 '12 One-Page Personal Website Examples to Inspire Creativity [2020]'을 각색하여 작성되었습니다.
로그인하고 자유롭게 의견을 남겨주세요.
