포트폴리오 웹사이트 디자인을 위한 기본 7 단계

Design News/Design Trend

by 김현욱 a.k.a. 마루 2013. 12. 3. 08:02

오늘날 포트폴리오 웹사이트 디자인은 완수해야 할 도전 과정 중의 하나가 되어가고 있습니다. 예를 들어, 디자이너들과 개발자들은 웹사이트의 유용성, 검색 엔진 크롤러의 사용 지침서, 스타일링 그리고 사용자 반응 등을 고려해야 합니다.

가끔씩 최신 기술, 디자인 혹은 테마를 가지고 새로운 웹사이트를 제작하기 위해, 전문가들은 사이트의 기본 기술 몇 가지를 무시할 수밖에 없습니다. 이런 이유의 결과로, 디자인이 잘 된 포트폴리오 웹 사이트이지만 검색 엔진 순위에 오르지 못하기도 합니다.

기본적인 가이드라인에 충실한 것은 언제나 문제 되는 부분 없이 더 나은 디자인을 개발하는데 도움을 줍니다. 아래의 몇 가지 나열된 팁들은 여러분의 포트폴리오 웹 사이트를 검색엔진의 순위에서 더 올라갈 수 있도록 도와줄 것입니다.

1. 낡은 기술은 버려라

기술은 몇 년에 걸쳐 꾸준히 진보하고 있고, 효과적인 웹사이트를 만드는 여러 가지 새로운 툴도 제공되고 있습니다. 디자이너들은 메시지를 전달하기 위해 애니메이션이나 시각적인 효과 등의 컨텐츠를 만드는데, 종종 플래시와 프레임을 사용하곤 합니다.

자바스크립트와 결합된 HTML5 는 플래시(flash)나 다른 요소들과 비교했을 때 더 우호적입니다. 검색엔진과 친숙한 구조와 특성을 생각한다면, 최신 기술을 사용하는 것을 강력히 추천합니다.

2. AJAX를 사용

AJAX를 사용하는 것은 사용자 경험을 증가할 수 있게 해주고, 페이지 로딩 시간을 절감시켜 줍니다. AJAX로 되어 있는 컨텐츠를 유지한다면, 검색엔진은 크롤러에게 여러분이 결과의 첫 번째를 강조하는 것을 선호한다는 정보를 알려주게 될 것입니다. 하지만 메모해야 할 중요한 것은, 이것은 매우 까다로운 일이고, 구글은 언제나 예측 불가능합니다.

그러므로 'Fetch as Google' 툴을 사용하여 검색엔진이 웹사이트를 어떻게 해석하는지 살펴 보세요. 더불어, 에러 소스코드를 체크하여 구글이 텍스트를 쉽게 읽을 수 있도록 해주세요. 또한 pushState 메소드를 사용하여 구글이 AJAX로 스크립트된 다른 모든 버전들을 읽을 수 있도록 해주세요.

3. 중요 컨텐츠는 강조

구글은 이미 컨텐츠가 나오기 이전에 뜨는 많은 광고, 팝업, 그리고 방해되는 이미지들을 가진 웹사이트가 검색엔진에서 제외될 수 있다는 사실을 알고 있습니다. 사실, 이러한 방해 요소들은 항상 사용자 경험에 있어서 매우 부정적인 영향을 미칩니다. 그러므로, 팝업과 다른 방해되는 것들을 제거하도록 노력하여, 사용자들이 해당 사이트를 제대로 이해할 수 있도록 해주세요.

4. 무거운 이미지를 최적화시킬 도구의 활용

웹디자인 프로젝트는 그래픽과 이미지가 관건이라고 할 수 있습니다. 게다가, 그래픽이나 이러한 요소들을 수정하는 일은 무한한 가능성을 주는 기술로 인해 점점 더 편리해지고 있습니다.

하지만 어려운 일이더라도 디자이너들은 웹사이트의 무거운 이미지와 시각효과를 주는 요소들을 로딩시키는 일을 결국은 완성해야 합니다. 이것들은 결국, 검색 순위나 트래픽에 영향을 미치는 로딩속도를 차례차례 방해하는 결과를 초래합니다. 그러므로 포토샵이나 smush.it와 같은 도구를 이용하여 이미지를 최적화시켜 주십시오. 이 과정은 무거운 파일에서 읽어 오는 불필요한 바이트를 제거하는 데 도움을 줍니다.

5. 내비게이션은 심플하게 유지

웹사이트의 네비게이션은 심플해야 합니다. 내비게이션 구조는 검색엔진이 링크의 형평성을 이해할 수 있도록 간단하게 보여야 하는 것으로 정의되어야 합니다. 검색엔진이 더 빠르고 쉽게 이해할 수 있도록 개발을 하는 것은 웹사이트의 순위를 높이는데 도움을 줍니다. 그러므로 웹에서 사용자 경험(UX)이 향상되는 깔끔한 내비게이션을 디자인 하세요.

6. 반응형 디자인을 고려

요즘에는 인터넷에 접속하는 방법이 여러 가지 있습니다. 스마트폰, 태블릿, 스마트TV, 등등은 인터넷을 이용할 수 있는 스마트 기기입니다. 모바일 웹사이트를 개발하는 것은 미래의 고객들을 유혹하고 시장을 확장시킬 수 있는 가장 좋은 방법의 하나입니다. 반응형 웹 디자인(RWD)은 요즘 매우 대중적이 되었고, 많은 회사가 서로 다른 스크린 사이즈에 자동으로 대응할 수 있는 반응형 웹사이트를 만들고 있습니다. 이는 같은 소스 코딩과 URL을 사용하며, 링크 형평성은 변하지 않습니다. 이와 같이 반응형 디자인은 한번 만들어 놓으면 오랫동안 유지할 수 있습니다.

7. SEO(Search Engine Optimization) 기본에 충실.

SEO(검색 엔진 최적화)는 웹사이트의 영혼입니다. 그러므로 SEO 기본을 무시하면 악영향을 초래할 수 있습니다. 전송량(Traffic)과 검색 순위(Search Rank)를 향상하기 위해 웹사이트에서 가능한 텍스트, 콘텐츠, 설명, 머리말과 키워드를 최적화시켜 놓으세요.

프로젝트를 위해 웹디자인 전문회사를 고용하는 것은 여러 가지로 이득이 됩니다. 기억하세요. 구글은 사용자들을 잘 배려하는 웹사이트를 선호합니다.

검색 순위, 비쥬얼, 그리고 전송량(Traffic)은 사용자 경험의 질에 의존합니다. 그러므로 방문자들을 유혹하는 매력적인 디자인의 특별한 웹사이트를 개발하되 기본을 고려하는 것 또한 잊어서는 안 됩니다.

원문 링크) Seven Basic Steps in Portfolio Website Designing

<번역>

Staff Editor : Young Im Kim | www.facebook.com/youngim.kim

※ 본 기사는 웹진 '디자인로그(designlog.org)' 독자와 페이스북 'Design' 페이지 팬들이 디자인 인사이트를 넓히는데 도움을 드리기 위해 해외 디자인 트렌드 매거진과 블로그 기사를 바탕으로 세 분의 Staff Editor가 한국어로 번역하여 제공되고 있습니다.