요즘 워드프레스와 같은 CMS(Contents Management System)를 기반으로 홈페이지를 제작하는 경우가 많아지면서, 콘텐츠를 관리하기가 더욱 수월해졌습니다. 개발자나 제작사를 거치지 않고 직접 글을 게시하거나 편집할 수 있게 되었지요. 

그래서 웹사이트 제작 프로젝트를 진행할 때 관리자의 글 편집 기능을 좀 더 신경 쓰게 되는데요. 슬로워크에서는 콘텐츠를 깔끔하게 정리하여 게시할 수 있는 본문 작성의 가이드를 드리기도 합니다. 가이드에 맞춰 공지나 새 소식에 게시할 글을 작성하면, 별도의 디자인이나 퍼블리싱 과정 없이 본문의 요소를 표현할 수 있습니다.


본문 스타일가이드의 예본문 스타일가이드의 예



본문의 스타일을 고민하기에 앞서, 게시물의 원고를 준비하는 단계를 생각해봅시다. 스타일 가이드를 잘 만들어두었다고 해도, 원고의 적절한 가공이 없으면 그 내용을 효과적으로 전달하기 어렵습니다. 


제목은 어떻게 쓸 것인지, 단락은 어떻게 나눌 것인지, 어느 부분에 표와 이미지를 활용할 것인지 고민해보셨나요? 또한, 종이 위의 보고서를 만드는 것이 아니라 웹사이트에 글을 올릴 것이므로 웹의 속성을 고려할 필요가 있습니다. 적절한 콘텐츠 표현을 위해 어떠한 고민이 필요한지, 요소별 체크포인트를 알아봅시다.



텍스트 - 소제목을 활용하거나 단락을 구분합니다.텍스트 - 소제목을 활용하거나 단락을 구분합니다.


1. 텍스트

- 제목과 본문을 구분하였는가: 제목의 단계를 활용하여 내용의 상하/포함 관계를 나타냅니다.
- 소제목으로 구분하였는가: 내용이 길고 단락마다 주요 내용이 다르다면 소제목으로 구분해보세요.
- 요약글을 더했는가: 가독성이 높아집니다.
- (본문 영역의 너비가 넓다면,) 단을 나눠서 글을 썼는가: 가독성을 높이는 데 도움이 됩니다.
- 전체 글의 양이 적절한가: 웹은 스크롤이 되기 때문에 본문의 양이 많아도 괜찮을 것 같지만, '스크롤의 압박'이라는 말도 있지요. 읽기 부담스러운 양의 본문은 사이트 이탈을 유발할지도 모릅니다.



표 - 데이터의 정렬을 확인합니다표 - 데이터의 정렬을 확인합니다


2. 표

- 표의 형태로 표현하기 적합한 콘텐츠인가: 단순히 레이아웃을 위해 표를 사용하지는 않았나요? 행과 열로 구분할 수 있고 여러 항목의 비교가 필요한 내용인지 살펴봅시다.
- 행과 열의 수가 적절한가: 행과 열이 너무 많으면 특히 모바일 디바이스에서 표에 담긴 내용을 파악하기 어려울 수 있습니다.
- 데이터의 정렬을 확인했는가: 숫자 데이터는 오른쪽 정렬을, 일반적인 글자 데이터는 왼쪽 정렬을 합니다. 표의 제목 행은 그 데이터 정렬과 같이 합니다. 되도록 가운데 정렬은 사용하지 않습니다.





3. 도식

- 도식으로 표현하기 적합한 콘텐츠인가: 도식은 주로 그룹 사이의 관계를 나타내거나, 구조, 변화를 나타낼 때 유용합니다. ex) 조직 구조도
- 다른 요소로 대체할 수 있는가: 웹상에서 도식을 사용하기가 쉽지는 않기 때문에 꼭 필요한 부분에만 사용하세요. 절차나 순서를 알려주는 내용에는 화살표 특수기호만 이용해도 좋습니다. 
- 도식의 크기와 형태가 웹사이트에 적절한가: 표와 마찬가지로, 도식을 가로나 세로로 너무 길게 표현하면 오히려 내용을 파악하기 어렵고, 모바일 환경에서는 별도의 도식 이미지를 준비해야 할 수도 있습니다.



이미지 - 이미지에 대한 설명을 캡션으로 표기합니다(예: 슬로워크 블로그)이미지 - 이미지에 대한 설명을 캡션으로 표기합니다(예: 슬로워크 블로그)




4. 이미지

- 캡션을 표기하였는가: 사진이나 이미지에 설명을 덧붙이면 본문 내용의 이해에 도움이 됩니다. 
- 이미지와 텍스트를 섞어 작성하였는가: 되도록 본문 전체를 웹 포스터 형태의 단일 이미지로 게시하거나, 이미지만 올리는 경우를 피하세요. 로딩 속도를 지연시킬 수도 있고, 특정 내용을 찾기 위한 검색에도 큰 도움이 되지 않습니다. 
- 이미지의 비율이 적절한가: 반응형 웹의 경우, 가로로 긴 와이드 이미지는 모바일 환경에서 너무 작게 보일 수도 있습니다. 



링크 - 링크를 단락과 구분하여 구분한다(예: DMZ국제다큐영화제 웹사이트)링크 - 링크를 단락과 구분하여 구분한다(예: DMZ국제다큐영화제 웹사이트)




5. 링크

- 링크와 링크가 아닌 요소를 구분하였는가: 링크 텍스트를 밑줄이나 다른 색상으로 구분해주세요. 클릭할 수 있는 것인지 명확히 해주는 것이 좋습니다. 링크를 단락과 구분하여 별도로 표시하는 것도 좋습니다. 이미지 자체에 링크하기보다는 텍스트로 링크를 표시하여, 사용자가 실수로 클릭하거나 이미지 확대 보기와 혼동하지 않도록 하세요.




웹상에서 글쓰기도 다른 글쓰기와 크게 다르지 않습니다. 다만 몇 가지 특징을 알고 준비한다면, PC와 모바일 모든 환경에서 보기 좋고 이해하기 쉬운 글을 쓸 수 있습니다. 사이트를 통해 제공하는 정보는 결국 방문자들을 위한 것입니다. 같은 내용이라도 쉽고 적절하게 표현하였는지 한 번 더 확인해보세요.







작성: 오예슬


Posted by slowalk


슬로워크 블로그에서는 얼마 전, 비디자이너의 얕은 지식 쌓기: 디자인 용어 20에 대해 포스팅했습니다. 그 글을 보고 저 또한 개발팀 내 유일한 비개발자이기에 많은 영감을 받아 이번 글을 작성하게 되었습니다. 저는 웹기획자로 프론트엔드개발자 두 명, 백엔드개발자 한 명과 함께 팀을 이뤄 작업하고 있습니다. 개발자와 함께 일하기 역시 기본적인 용어를 알지 못하면 혼란스러운 상황(나는 누구? 여긴 어디?..)에 처할 수 있습니다. 고객들도 웹사이트 의뢰를 하면서 익숙지 않은 여러 용어에 낯설어 합니다. 저 역시 아직도 갈 길이 멀지만, 개발자와 소통하기 위한 넓고 얕은 개발용어 몇 가지를 안내해 드립니다.



프론트엔드개발자와 백엔드개발자는 어떻게 다른 건가요?


프론트엔드개발자 - 사용자의 화면에 나타나는 웹 화면을 프론트엔드(Front-end) 영역이라고 합니다. 그리고 이 영역을 설계하는 사람을 프론트엔드개발자라고 합니다. 프론트엔드개발자는 사용자가 보는 화면을 주로 HTML과 CSS를 사용하여 보기 좋게 보이게 만들어주는 사람이라고 할 수 있습니다.


백엔드개발자 - 백엔드(Back-end) 영역은 일반적으로 사용자가 볼 수 없습니다. 예를 들어, 회원가입 정보를 입력하면 그 정보는 서버 데이터베이스에 저장되는데, 이러한 동작들이 처리되는 영역이 백엔드 입니다. 사용자가 보이지 않는 웹서버, 내부로직, 데이터베이스 설계, 데이터 처리를 주로 개발하는 사람입니다.

프론트엔드에서 사용자가 클릭, 드래그의 동작을 하면 이를 백엔드에서 처리한 데이터를 다시 프론트엔드로 돌려주어 사용자가 해당 작업을 수행할 수 있게 됩니다. 예를 들어, 페이스북에 사용자가 사진을 올리면 그 사진을 백엔드에서 데이터베이스에 저장하고 다시 프론트엔드로 돌려주어 내 사진을 다른 사용자가 볼 수 있게 되는 것입니다.

꼭 두 영역을 명확히 나눠서 개발하는 것은 아닙니다. 프론트엔드, 백엔드를 함께 진행하는 개발자도 있는 등 역할의 범위는 다양합니다.



자바, 파이썬, 루비, 펄, C++ .. 이게 다 무슨 이름인가요? 프로그래밍 언어는 다양하여 많은 선택지가 존재합니다. 유행을 타기도 하고 순위가 매겨지기도 합니다. 현재 사용되는 프로그래밍 언어는, 위키피디아에 따르면 698종이라고 합니다. 그 중 가장 많이 사용하는 언어는 C 계열 언어와 JAVA 계열의 언어이고, 최근에는 빅데이터 전문가가 뜨면서 R 프로그래밍이나 하둡에 관심을 두는 사람도 많아지는 추세라고 합니다. 각 언어는 저마다 장단점을 가지고 있고, 그렇기에 개발자들도 다룰 수 있는 언어들이 다양합니다.


출처: TIOBE



사용 가능한 프로그래밍 언어가 계속해서 늘고 점유율 순위가 바뀌고 사라지는 이유는 사용성 때문입니다. 요구사항이 변하고 시스템이 바뀔 때마다 손쉽게 바꿀 수 있어야 좋은 프로그래밍 언어가 됩니다.

비개발자이더라도 위 프로그래밍 언어들의 이름 정도만 알고 있으면 개발자들이 옆에서 이야기할 때 ‘아~ 프로그래밍 언어 얘기하는구나!’ 정도는 이해할 수 있습니다. 개발자와 가까워지는 방법은 그들의 언어를 한 번이라도 더 많이 들어보는 것입니다.



PHP, MySQL, Oracle 들어는 봤는데.. 서버? 백엔드개발자들이 사용하는 언어 맞나요?

PHP는 서버 쪽에서 동작되는 언어입니다. 자바스크립트나 HTML이 웹 브라우저에서 구동되는 것과는 구분됩니다. 사용자가 업로드한 파일을 서버에 저장하거나, 입력 데이터를 받아 데이터베이스나 파일에 저장하고, 저장된 정보를 불러와 HTML을 생성해서 웹브라우저로 전송하는 일을 처리합니다.

MySQL은 데이터를 보관하는 데이터베이스 관리 시스템의 한 종류입니다. 데이터베이스는 파일보다 정보 저장에 관해 더 많은 기능을 제공하기 때문에, 대부분의 데이터들이 데이터베이스에 저장됩니다. 그 중 MySQL은 오픈소스이기 때문에 많이 사용되고 있습니다.  


*서버 - 서버란 파일, 홈페이지, 동영상 등의 자료를 보관하고, 보관된 자료를 인터넷이 연결된 곳에서 언제든지 접근할 수 있도록 구성된 소프트웨어를 말합니다. 서버에는 메일서버, 웹 서버, 데이터베이스를 관리하는 DB서버, FTP프로토콜을 이용하여 파일전송을 가능케하는 FTP서버 등 다양한 서버가 있습니다.



서브라임텍스트3 사용하고 있고요, 깃으로 푸시해주세요~ 서브라임텍스트는 개발도구를 말합니다. 일반적으로 프로그래밍을 하는 데는 윈도우에서 메모장, 맥에서는 텍스트 에디터만 있어도 가능합니다. 그러나 규모가 크고, 오류가 없는 프로그램을 만들기 위해 작업을 도와주는 수 많은 개발도구들이 존재합니다. 좀 더 빠르고 효율적으로 개발하기 위해 도구를 사용하는 것이죠. 개발도구에는 비주얼스튜디오, 노트패트++, 빔, 이클립스 등이 있습니다. 그 중 서브라임텍스트는 개발자가 선호하는 도구 2위를 차지할 만큼 인기를 끌고 있습니다. 현재 슬로워크 1팀에서는 서브라임텍스트3을 사용하고 있습니다. 서브라임텍스트는 유료이지만 무료로도 사용할 수 있습니다. 장점으로는 개발자들이 많이 사용하기에 플러그인이 많아 원하는 대로 기능 확장이 가능합니다. 또한 가벼워서 좋다고 합니다.





기본적으로 이러한 까만 창이 서브라임텍스트3 입니다. 코딩을 위한 폰트도 개발자의 설정에 맞게 변경할 수 있습니다. 자세한 내용은 코딩 폰트 디자인기, Monoid를 참조해주세요.

깃(Git)은 버전관리 시스템으로 소스코드의 중요한 변화를 기록하는 것입니다. 어떠한 문제가 발생했을 때 문제의 전후 상황을 파악할 수 있도록 도와주고, 과거의 상태로 쉽게 돌아갈 수 있게 합니다. 특히 백업, 협업에 쉬워 많이 사용되고 있습니다. 물론 Git이 모든 걸 해결해주진 않지만 도움을 주기 때문에 많이 사용하게 됩니다.


CMS는 주로 워드프레스를 사용해요~


CMS-Collage2.png

출처: wooraky's Minority Report



CMS(Contents Management System)는 콘텐츠 관리 시스템으로 웹사이트를 구성하고 있는 다양한 콘텐츠를 효율적으로 관리할 수 있도록 도와주는 시스템입니다. 콘텐츠를 손쉽게 생성, 배포, 관리할 수 있는 http 기반의 프레임워크*라고 생각하시면 됩니다. 웹 서버상에서 운용이 되고 다양한 방식의 기술적 적용이 가능합니다. 우리나라는 XE(Xpress Engine)가 CMS를 표방하고 있습니다. 또한 요즘은 워드프레스(Wordpress)를 많이 사용하는 추세입니다. CMS는 전 세계적으로 워드프레스, 드루팔(Drupal), 줌라(Joomla) 이 세 가지 툴이 많이 쓰입니다. 특히 워드프레스는 쉬운 사용법과 기능들을 통해  CMS 시장을 거의 장악하고 있습니다. 프로그래밍 언어와 같이 다양한 장단점이 있고 어떤 툴이 가장 좋다고는 할 수 없습니다. 다만 대표적으로 많이 쓰이는 CMS 세 가지 정도를 알고만 있어도 개발자의 이야기를 훨씬 많이 이해할 수 있습니다.


*프레임워크 - 소프트웨어 제작을 편리하게 할 수 있도록 뼈대인 클래스와 인터페이스를 제작한 것들을 미리 모아둔 것입니다. 개발자는 이 뼈대에 살을 붙이는 방식으로 어플리케이션을 완성 시킵니다. 개발 생산성이 증대되고, 유지보수가 비교적 편리하다는 장점이 있습니다.

단점은 익숙해지는 데에 시간이 소요되고 모든 상황을 커버할 수는 없다는 한계가 있다는 점입니다. 그렇기에 개발 프레임워크를 얼마나 쉽게 커스터마이징 할 수 있는지가 프레임워크의 우수성을 평가하는 기준이 되기도 합니다.



HTML / CSS / jQuery / JavaScript 를 사용해서 만들었고요~


HTML - HTML은 웹 브라우저를 통해 사용자에게 보이는 프론트 영역을 작성하기 위한 언어로 웹 문서 내용 작성에 집중 합니다. 웹 사이트의 뼈대가 되는 구조라고 볼 수 있습니다.

CSS - CSS는 HTML로 잡아놓은 뼈대에 다양한 스타일을 추가, 변경하여 웹사이트에 디자인을 부여하고 글자의 크기 모양 줄 간격 등을 제어할 수 있게 만들어주는 언어입니다. HTML로 만들어진 뼈대에 CSS로 디자인을 입힌다는 개념입니다.


14066284_10208305726855618_3819602411510392924_o.jpg

출처: 조성도 페이스북


JavaScript - 자바스크립트는 웹사이트에서 팝업창을 열거나 전화번호 또는 이메일 주소의 유효성을 체크하는 등의 기능적인 요소를 위해 사용되는 언어로 액션에 용이합니다. 즉 HTML로 만들어진 뼈대에 CSS로 디자인을 입히고 JavaScript로 움직임을 넣는 개념입니다.

jQuery - jQuery는 자주 사용되는 기능들을 쉽게 사용할 수 있도록 모아놓은 자바스크립트 라이브러리입니다. 쉽게 말해 자주 사용하는 자바스크립트의 복잡한 코드를 간소화해주는 모듈을 말합니다. 크로스 브라우징(웹브라우저의 종류에 상관없이 웹사이트의 레이아웃 위치나 모양이 동일하게 보여지도록 서비스 접근성을 향상시키는 기술)이 쉽게 해결됩니다.



반응형 웹으로 할까요, 적응형 웹으로 할까요?


반응형 웹과 적응형 웹도 웹 사이트 구축 시 빠질 수 없는 알아두어야 할 개념입니다. 해당 내용은 더 자세히 설명된 슬로워크 포스팅 글로 이동합니다.

반응형 웹, 정말 효과적일까?



구글지도API를 사용해서 찾아오시는 길에 넣을게요! API?


API - Application Programming Interface의 약자입니다.

각 단어를 나눠서 생각해보시면,

어플리케이션 : 응용프로그램, 즉 흔히 알고 계시는 앱(app)입니다.

프로그래밍 인터페이스 : 기계가 이해하기 쉽게 입출력이 데이터로 이루어지는 인터페이스 입니다.

즉, 웹 어플리케이션 개발에서 다른 서비스에 요청을 보내고 응답을 받기 위해 정의된 명세를 말합니다.


startup_img3.jpg

출처: 공공데이터포털



이렇게 프로그램 간 서로의 커뮤니케이션을 담당하는 기능이라고 이해하시면 됩니다.

최근 우체국의 우편번호 API, 구글과 네이버 다음지도 API등 유용한 API가 많아 홈페이지 구축 시 따로 추가 개발 대신 이러한 *오픈 API를 많이 사용하고 있습니다. 특히 하이브리드 앱이나 워드프레스로 웹사이트를 만들 때 더욱 유용하게 쓰이곤 합니다.


*오픈API - 말 그대로 오픈되어 있는 API, 즉 자사의 API를 개방하여 외부에서 쉽게 쓸 수 있도록 만든 것입니다. 오픈API는 포털의 개방성을 높이기 위한 기술적 기반/개방 응용프로그램 인터페이스입니다.


대표 오픈 API사이트 몇 가지를 소개해드립니다. 아래 사이트에 가보시면API가 어떤 용도로 쓰이시는지 조금 감이 오실 겁니다. 한 번쯤 구경해 보기에도 좋습니다.


서울시공공 오픈API

구글 디벨로퍼

페이스북 개발자

카카오 디벨로퍼



구글api.png

출처: 구글 디벨로퍼

기본적이지만 모르면 외계어처럼 들리는 개발 용어들에 대해 간단히 알아보았습니다. 사실 정말 많은 개발 용어가 존재하고 있고, 개발자마다 사용언어나 사용법이 조금씩 다릅니다. 그렇기에 가장 중요한 것은 내가 함께 일할 동료들의 대화에 귀 기울이며 많은 대화를 하는 것입니다. 이 글을 작성하면서 저 또한 같은 팀 개발자 동료들께 많은 검수를 받고, 조언을 얻었습니다. 그 과정에서 어떤 도구를 사용해 어떤 식으로 일을 하고 있는지도 더욱 자세히 알게 되었고, 커뮤니케이션의 중요성을 다시 한 번 깨닫게 되었습니다.


참조

공공데이터포털 테크엠






Posted by slowalk




디자인 에이전시는 늘 고객과 함께 소통해야 합니다. 그 소통의 중심에는 늘 디자인 시안이 있습니다. 만들어진 시안을 전달하고 그에 대한 의견을 듣고, 수정하고 완성하는 작업이 디자인 작업의 전반인데요. 웹디자인도 다르지 않습니다. 실제 화면에서 보이는 것과 같은 크기(픽셀)로 제작된 시안을 고객에게 전달하는 과정은 매우 중요합니다. 그래서 만들어진 슬로워크 프리뷰. 그 제작 과정을 알아봅니다. 


프리뷰, 왜 필요할까요?


웹디자인 의뢰를 받습니다. 기획, 정보설계가 확정되고 와이어프레임 단계를 거쳐 디자인 시안이 제작됩니다. 보통 2~3종의 다른 안을 준비하고, 메인페이지, 서브페이지를 나눠서 제작하는 경우도 있습니다. 화면에서 보이는 것과 똑같은 픽셀로 제작됩니다. 이런 이미지 파일을 고객에게 어떻게 전달할까요? 

이메일에 첨부 파일로 보냅니다. 고객이 다운로드 받아 열어보는데, 고객 PC의 이미지 보기 설정이 ‘화면 최대화’로 되어있네요. 그럼 우리가 정성 들여 만든 시안이 너무 크고 이상해 보일 겁니다. 어떤 고객은 정확한 배율로 열어 봤지만 가로 폭이나 좌우 여백이 마음에 들지 않습니다. 아무래도 이미지 뷰어와 브라우저에서 직접 보는 것은 큰 차이가 있기 때문입니다. 

이런 소통의 문제를 해결하기 위해 프리뷰 페이지를 만들게 되었습니다. 



프리뷰 페이지의 시작


이런 구성으로 초기 프리뷰 페이지를 제작했습니다. 간단한 html로 제작되었고, 몇 개의 이미지를 브라우저에서 실제와 같은 배율로 확인할 수 있도록 한 것이죠. 고객들에게 정확하게 시안을 전달할 수 있어 소통의 실수도 사라지고, 만족도도 높았습니다. 

첫 시안을 프리뷰에 올려 확인할 수 있는 URL을 고객에게 전달합니다. 이후 수정되는 시안을 디자인 팀에서 업데이트하면 같은 URL에서 확인하면 되니 고객 입장에서도 편리하다는 의견을 받았습니다. 



필요하긴 한데, 불편해요


그런데 프로젝트가 늘어나면서 계속 프리뷰 페이지를 만들다 보니 html 페이지를 만들고, 이미지에 링크를 걸고, FTP를 통해 서버에 업로드하는 반복 작업을 계속해야 했습니다. 여러 번 업데이트되는 시안은 계속 페이지가 늘어나게 되었고, 디자인에 더 집중해야 할 시간에 프리뷰 페이지 html 작업을 해야만 했습니다. 그리고 프로젝트마다 조금씩 다른 설정은 혼란스러웠고 코드를 다루다 실수라도 하게 되면 그 스트레스는 고스란히 디자이너의 몫이었습니다. 이런 반복된 작업과 실수를 막는 방법은 없을까? 고민을 하게 됩니다.



몇 가지 조건 


프리뷰 페이지는 프로젝트 진행에 꼭 필요하지만, 생성과 수정이 불편했습니다. 그리고 그간의 프로젝트들을 함께 모아보기도 어려운 구조였고, 이미지 파일도 서버의 여기저기에 흩어져 있었지요. 새로운 프리뷰 페이지의 몇 가지 조건을 만들었습니다. 


- 누구나 코드를 몰라도 페이지를 생성할 수 있어야 한다.

- 만들어진 프리뷰에 새로운 시안을 업데이트할 수 있어야 한다.

- 생성된 URL(주소)는 고객에게 전달하기 쉬워야 한다.

- 그간의 프로젝트 목록을 볼 수 있어야 한다. 단, 프로젝트 목록은 내부에서만 열람하도록 한다. 

- 모바일에서 잘 보여야 한다.



어떻게 쓰나요?


디자이너의 편의를 위한 html 작성이나 FTP 업로드 과정없이 브라우저에서 직접 올릴 수 있는 등록 페이지를 만들었습니다. 제목과 업로드 되는 이미지, 화면 구성은 최대한 결과물과 같도록 구성했습니다. 슬로워크 프리뷰의 주소 체계는 슬래시(‘/’)로 각 페이지를 구분하는데, 이 주소도 직접 설정할 수 있도록 했습니다. 





등록된 페이지는 언제든 수정할 수 있습니다. 올려진 시안을 삭제할 수 있고, 새로운 시안을 배치하고 업로드하기 편리하도록 했습니다.





고객에 보는 화면은 목록과 상세화면으로 이루어 지는데요. 목록에서 시안 제목과 이미지를 확인하고, 이를 클릭하면 브라우저에 100%로 확대된 이미지가 배치됩니다. 아직 움직이지 않는 시안이지만 앞으로 만들어질 웹사이트 화면을 확인할 수 있습니다. 





마무리


“고객과 소통하기 위한 장치를 우리 손으로 만들자”는 기획 아래 탄생한 슬로워크 프리뷰. 고객에게 정확하고, 보기 편한 시안을 전달해야 하는 것은 옳지만,  이를 위해서 들어가는 노력과 시간은 꽤 컸습니다.  “누군가의 편안함은 다른 누군가의 불편”이 될 수 밖에 없을까요? 슬로워크의 생각은 조금 다릅니다. 조금만 더 고민하면 좋은 것, 편안한 것은 함께 누릴 수 있고, 그렇게 절약된 시간과 노력은 더 좋은 일에 사용되어야 합니다. 그리고 무엇보다 슬로워크 프리뷰를 제작하면서 불편한 것을 직접 개선하기 위해 고민하는 소중한 시간을 가졌습니다. 

언젠가 슬로워크의 고객이 되신다면 만나실 겁니다. 슬로워크 프리뷰를 환영해 주세요.


by 북극곰 발자국


Posted by slowalk



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


쉽고, 빠르고 저렴한 웹사이트 만들기를 꿈꾸며 프로젝트를 시작하지만 어느 순간 난관에 봉착합니다. 당연히 될 줄 알았던 모바일웹사이트는 이상하게 깨지고, 검색엔진에 잘 걸릴 줄 알았는데 네이버에서는 제 웹사이트를 찾아볼 수 없습니다. 그리고 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