'homepage'에 해당되는 글 2건

  1. 2014.10.01 워드프레스는 만능인가요?
  2. 2014.05.15 새롭게 바뀐 슬로워크 홈페이지를 소개합니다! (2)



웹사이트에 관심있는 분들은 한 번쯤 들어봤을 만한 “워드프레스”. 워드프레스하면 떠오르는 이미지들이 있습니다. 공짜, 쉽다(!), 누구나 할 수 있다, 다 된다, 오픈소스, 공유정신. 대부분 긍정적인 이미지로 쉽고 빠르게 원하는 웹사이트를 만들 수 있다는 생각을 하실 겁니다. 그리고 오픈소스라서 누구나 무료로 사용할 수 있고요. 그래서 그런지 중소기업이나 비영리기관,  공공기관, 그리고 프리랜서 디자이너들이 관심을 가지고 워드프레스를 사용하고 싶어합니다. 


쉽고, 빠르고 저렴한 웹사이트 만들기를 꿈꾸며 프로젝트를 시작하지만 어느 순간 난관에 봉착합니다. 당연히 될 줄 알았던 모바일웹사이트는 이상하게 깨지고, 검색엔진에 잘 걸릴 줄 알았는데 네이버에서는 제 웹사이트를 찾아볼 수 없습니다. 그리고 5분이면 설치할 수 있을 줄 알았는데, 자꾸 알 수 없는 에러 메시지를 만나게 됩니다. 


슬로워크 웹개발실에서 제작하는 대부분의 웹사이트는 워드프레스 기반으로 제작됩니다. 그간의 웹사이트 구축 경험을 모아 “워드프레스로 할 수 있는 것”에 대해 이야기해보겠습니다. 


누구나 쉽게 웹사이트를 만들 수 있다는데 사실인가요?


워드프레스는 오픈소스이므로 누구나 무료로 사용할 수 있습니다. 공식 웹사이트 wordpress.org에 가면 최신 설치 파일을 받을 수 있습니다. 그런데 이 파일을  올려서 설치할 호스팅(서버)이 필요합니다. 파일을 올릴 때는 FTP를 이용해서 올립니다. 올리고서 적당한 URL로 접속하여 설치를 해줘야 하는데 이 과정에서 MySQL접속 정보를 물어봅니다. 위 과정이 모두 이해 되시나요? 그렇다면 워드프레스를 “5분” 안에 설치하실 수 있는 분입니다. 만약에 좀 버거우시다면 웹서버 접속이나 환경에 대해 조금 더 학습이 필요하겠네요. 



유명한 "5분" 설치



워드프레스를 설치했습니다. 이제 완성된 웹사이트를 볼 수 있나요?


이제 막 워드프레스를 설치하셨다면, 웹사이트의 핵심구동 엔진을 설치하신 것입니다. 이제 “내가 원하는” 웹사이트를 만들기 위해서는 디자인과 기능을 담은 “테마”를 설치하고 추가적인 기능을 담은 “플러그인”을 설치하셔야 합니다. 이 단계부터는 FTP 등에 접속하지 않고도 관리자 모드에서 쉽게 클릭으로 설치하실 수 있습니다. 테마를 설치하고 만들고 싶은 순서대로 “페이지”를 만들고, “카테고리”를 만들어줘야 합니다. 또한 이것들을 엮어 “메뉴”도 생성해 주셔야 합니다. 그러면 텅 빈 웹사이트를 만들 수 있습니다. 



메뉴구성화면


워드프레스로 만든 웹사이트들은 디자인이 좋던데 아름다운 디자인을 제공하나요?


워드프레스 자체는 핵심 기능만 가지고 있는 “엔진”입니다. 원하는 모습을 만드실려면 적당한 테마를 설치해야 하는데요. 워드프레스가 좋은 디자인을 제공하는 것이 아니고, 워드프레스용 테마들이 아름답게 만들어진 것이지요. 무료로 배포하거나 유료로 판매하는 테마들은 대부분 어느 정도 이상의 디자인 퀄리티를 가지고 있습니다. 이들 중 취향에 맞는 테마를 골라 설치할 수 있는 것이지요. 하지만 이는 워드프레스가 가진 좋은 생태계이지 본연의 기능은 아닙니다. 여러분이 원하는 디자인의 테마를 찾으시거나 새로 만드셔야 취향에 맞는 아름다운 웹사이트가 탄생합니다. 물론 새로운 테마를 만들려면 PHP, HTML, CSS 등에 대한 지식이 필요합니다.



테마 검색 화면


자동으로 모바일 지원이 되나요?


원하는 테마를 선택해서 잘 설치했습니다. 이런 저런 페이지도 만들었고요. 그런데 스마트폰 화면으로 보니 화면이 이상하게 깨지네요…? 

워드프레스는 자동으로 모바일 지원을 하지는 않습니다. 대부분 테마들이 모바일 최적화가 되어 있는 경우이지요. 반응형웹이 적용된 테마나 모바일 전용 테마를 설치해야 모바일 지원이 됩니다. 물론 워드프레스의 관리자모드는 대부분의 기기에서 구동이 됩니다. 



모바일 최적화?
http://en.support.wordpress.com/themes/mobile-themes/


검색엔진 최적화가 된다던데?


검색엔진 네이버에서 내가 만든 홈페이지의 글 제목을 검색하지만 잘 검색이 되지 않습니다. 몇 페이지를 넘기니 그제서야 초라하게 링크가 걸려 있습니다. 워드프레스는  자동으로 검색엔진 최적화를 해준다는 어떻게 된 일일까요? 

워드프레스로 제작한 웹사이트의 콘텐츠들은 테마에 따라 다르겠지만 검색엔진이 수집하기 쉽게 규격화된 문서를 만들어 줍니다. 그런 문서들은 빠르게 검색엔진에 노출되고 여러가지 랭크 알고리즘에 따라 순차적으로 보이게 됩니다. 그러나 검색엔진 회사에서는 단순히 수집된 정보만을 보여주지는 않습니다. 자사의 노출 순서에 따라 순위를 결정하기 때문에 단순히 워드프레스로 만들면 검색엔진 최적화가 된다고 생각할 수는 없습니다. 


플러그인으로 모든 기능을 구현할 수 있나요?


수많은 플러그인을 가지고 있는 워드프레스는 다양한 기능을 플러그인 설치만으로 구현할 수 있습니다. 포럼을 만들 수도 있고, 유사 소셜네트워트를 구축할 수도 있습니다. 인기글 순위를 보여주는 위젯도 있고, 소셜관련 플러그인도 매우 다양합니다. 이렇게 다양하고 강력한 플러그인을 잘 선택하여 사용하면 매우 고품질의 웹사이트를 만들 수 있습니다. 하지만 무턱대고 플러그인을 설치하다 보면 경우에 따라서 웹사이트가 점점 느려져 사용이 불편할 수도 있습니다. 또한 서로 다른 개발자가 만든 플러그인이 상호 충돌을 일으켜 전혀 예상하지 못한 결과를 가져오기도 합니다. 플러그인을 이용할 때는 많은 검색과 신중한 설치가 중요합니다. 





보안에 강하다던데?


워드프레스는 지금 이 순간에도 전세계의 개발자들이 보완 작업을 진행하고 있습니다. 혹시 있을 수 있는 약점을 보완하고, 좀 더 편리하고 효율적인 기능을 제공하기 위해 지속적으로 업그레이드가 됩니다. 이 과정에서 사용자, 관리자 편의 기능뿐 아니라 보안 취약점도 지속적으로 보완이 되고 있습니다. 긴급한 보안 상황이 생길 경우에도 발 빠르게 대응을 해주고 있습니다. 웹사이트의 관리자가 “지속적으로 업그레이드만 해준다면” 보안상 문제가 생기는 경우는 없을 것입니다. 



꾸준한 업데이트
http://codex.wordpress.org/WordPress_Versions



마치며


무엇이든 다 될 줄 알았던 워드프레스. 손쉬운 설치와 운영, 관리로 많은 사랑을 받고 있지만 뭐든지 쉽게 할 수 있는 만능 도구는 아닙니다. 고품질의 웹사이트 제작을 위해선느 어느 정도의 추가 개발이 필요합니다. 그렇다고 전문가만 다룰 수 있는 어려운 도구는 더더욱 아닙니다. 인터넷에 널려 있는 관련 정보를 통해 학습하면, 자신만의 웹사이트를 직접 만들 수 있게 해주는 좋은 도구입니다. 꾸준한 관심을 가지고 활용법을 익혀나간다면 디자인 포트폴리오부터 기업 웹사이트까지 다양한 웹사이트를 만들 수 있습니다. 이런 좋은 도구를 잘 활용해서 자신만의 웹사이트를 만들어 보는 것은 어떨까요. 





by 북극곰 발자국




Posted by slowalk

슬로워크의 다양한 프로젝트와 디자인 작업물을 만나볼 수 있는 공간! 슬로워크 홈페이지(slowalk.co.kr)에 방문해보신 적이 있나요? 초창기 3명의 직원으로 시작해 이제는 25명의 구성원이 일하는 회사로 성장한 슬로워크. 양적인 크기뿐 아니라 더 깊이 있게 다양한 영역을 확장해가는 슬로워크에게 홈페이지 리뉴얼은 꼭 필요한 과정이었습니다. 



기존의 슬로워크 홈페이지



슬로워크만의 스타일과 기존 홈페이지의 쉽고 간편한 방향성은 유지하되 확장된 크기와 사업 영역에 맞춰 전문성을 더하고, 많은 분들께 조금 더 친절하고 가깝게 다가가는 홈페이지를 만들기 위한 고군분투! 실력과 열정을 겸비한 슬로워크 웹 개발실에서 개발, 디자인하고 슬로워크의 각 구성원들이 지속적으로 함께 참여해 만들어가는 slowalk.co.kr을 소개합니다. 



리뉴얼된 슬로워크 홈페이지



움직임 | 매일, 최근의 정보들이 자동으로 업데이트 되는 메인 페이지




메인 페이지의 상단 4개의 박스는 블로그, 슬로데이(Sloday), 슬로워크 캠페인&프로젝트, 보트포그린(I Vote for Green) 캠페인 등 각각의 역할을 가지고 있습니다. 각 사이트와 연동되어 매일매일 그리고 가장 최근의 자료들이 자동으로 업데이트 되는 구조로 만들어졌는데요. 블로그와 슬로데이, 보트포그린의 경우 매일, 슬로워크 캠페인은 가장 최근의 자료가 업데이트 됩니다. 각 영역을 클릭하면 해당 사이트로 이동하여 보다 자세한 정보를 살펴볼 수 있습니다. 메인 페이지의 하단 부분은 슬로워크 페이스북과 트위터의 글이 실시간으로 올라오는 구조로 되어 있어 홈페이지의 생동감을 더합니다.



연결 | 링크로 연결되어 원하는 정보로 쉽게 접근할 수 있는 유연한 구조




새롭게 바뀐 슬로워크 홈페이지에서는 유난히 클릭을 해서 다른 페이지로 연결되는 링크를 많이 볼 수 있는데요. 홈페이지에서는 쉽고 간결하게 표현하되, 블로그에 있는 컨텐츠를 연결하여 더 깊이 있고 풍성한 홈페이지를 만들고자 하였습니다. 각 작업 별 간단한 설명과 링크를 클릭하여 슬로워크 블로그에서 관련된 포스팅 내용을 자세히 살펴볼 수 있습니다. 





또한 관련 태그와 각 구성원의 이름도 클릭을 할 수 있는데요. 태그를 클릭하면 관련된 키워드의 작업들을 찾을 수 있습니다. 작업과 함께 게시된 디렉터와 디자이너의 이름을 클릭하면 개인별로 참여한 작업들을 한번에 모아서 볼 수 있습니다. 슬로워크의 홈페이지면서 또 각 구성원의 포트폴리오가 될 수도 있는 유연한 구조입니다. 





인포그래픽 카테고리는 그래픽 이미지를 클릭하면 큰 이미지로 실제 정보를 확인할 수 있도록 구성하였습니다.



친절함 | 한 눈에 파악해서 볼 수 있는 썸네일(thumbnail) 이미지




한 눈에 작업들을 쭉 모아 볼 수 있는 썸네일 이미지 형태는, 작업물 전부가 쭉 펼쳐져 있던 기존 홈페이지와 큰 차이점이라 할 수 있는데요. 예전의 작업들을 찾기 위해 일일이 페이지를 많이 넘겨봐야 했던 기존 홈페이지의 단점을 보완하여, 작업들의 작은 대표 이미지를 통해 한 눈에 쉽게 들어오는 포트폴리오를 만들었습니다. 빠르게 필요한 이미지들을 찾을 수 있고, 슬로워크 디자인의 스타일과 각 작업물의 특성을 한 눈에 살펴볼 수 있습니다.





뉴스와 프레스 부분도 썸네일 이미지로 정보를 판단하여, 클릭했을 때 상세한 설명을 만나볼 수 있습니다. 썸네일 만으로도 수많은 정보들 속에서 빠르게 필요한 정보를 선택하여 볼 수 있다는 장점이 있겠지요.



구체성 | 사진으로 촬영해 실제적인 이해도를 높인 포트폴리오





기존 홈페이지에서는 작업 대부분이 그래픽 이미지로 표현되어 있는 경우가 대부분이었는데요. 실제로 인쇄된 책자, 브로슈어, 그리고 구조가 복잡한 패키지 작업물의 경우 물성을 표현하는데 한계가 있었던 것이 사실입니다. 그래서 이번 홈페이지 리뉴얼을 통해서 실제로 인쇄된 작업물은 사진으로 촬영하여 실제적인 이해를 도울 수 있도록 하였습니다. 앞으로 자체적으로 지속 가능한 포트폴리오 촬영을 위해 장비 구입, 교육, 여러 가지 실험을 통한 자체 촬영 프로세스를 만들어가는 중에 있습니다.^^  



간결함 | 복잡하지 않은 메뉴 구성




메뉴 구성에 있어서는 불필요하게 많은 카테고리나 여러 번 클릭해야 하는 복잡한 단계를 피하였는데요. 각 카테고리 당 4개를 넘지 않는 하위 카테고리, 한번에 펼쳐지는 구성으로 메뉴 구조를 단순화시켜 사용자 접근성과 이해도를 높였습니다. 



편의성 | 모바일 환경에서의 편의성




리뉴얼된 슬로워크 홈페이지의 큰 장점 중에 하나. PC, 태블릿PC, 스마트폰 등 어디에서도 편리하게 최적화되어 볼 수 있다는 점인데요. 단 수의 차이만 있을 뿐 태블릿PC와 모바일 환경에서도 불편함 없이 PC와 같은 기능으로 슬로워크 홈페이지를 이용할 수 있습니다.



처음 슬로워크에 입사 지원할 당시, 웹 상에서 다른 정보를 찾기 쉽지 않았던 재야의 숨겨진 조직이었던 슬로워크. 그 때 slowalk.co.kr에 올라와 있던 단 몇 개의 포트폴리오가 한줄기 빛처럼 느껴졌던 기억이 나는데요.^^ 그만큼 회사의 홈페이지는 관심을 가지고 지켜보는 사람들, 클라이언트, 입사를 희망하는 사람들에게 간접적으로나마 회사를 경험해보고 다양한 프로젝트를 공유하고 소통하는 공간이라 할 수 있겠지요. 


그런 공간인 만큼 실제와 보여지는 것 사이의 간극을 줄여 더 가깝게 다가갈 수 있는 slowalk.co.kr이 되도록 노력하겠습니다. 많은 관심 가지고 함께 지켜봐주세요. :-)




by 해달 발자국




Posted by slowalk