최근 워드프레스 4.2 버전과 MySQL 버전과의 호환성 문제로 여러 웹호스팅 회사를 문의해보고 실제로 두 곳의 호스팅을 이용해봤는데 그 중 아이비호스팅이라는 회사의 서비스가 가장 좋았습니다. 속도도 빠르고 일부 웹호스팅에서는 메모리가 부족해 사이트가 나타나지 않던 문제도 없었습니다. 다만 두 가지 문제점이 있는데 우선 성능을 알아보고 해결 방법을 알아보겠습니다. 향후 웹호스팅을 사용할 계획이라면 아이비호스팅을 적극 추천합니다. 다른 웹호스팅 회사도 본받아야 할 것으로 생각되기에 글을 통해 올리는 것이며 필자와 이 회사와는 전혀 관계가 없습니다. http://www.ivyro.net/html/webht/web/ 이 회사의 하드디스크는 SSD입니다. PC에서나 볼 수 있는 하드디스크입니다. 메모리처럼 속도..

워드프레스가 4.2 버전으로 업그레이드 되면서 데이터베이스 캐릭터셋(DB_CHARSET)을 utf8mb4까지 지원하게 됐습니다. 기존의 utf8는 제한된 유니코드 캐릭터를 저장할 수 있는데 반해 utf8mb4는 어떤 유니코드라도 저장할 수 있습니다. 따라서 한자 문화권의 글자는 무제한 저장이 가능합니다. 그런데 국내의 웹호스팅에서는 최소한의 사양으로 서버를 운영하기 때문에 이러한 혜택을 누릴 수가 없습니다. 워드프레스가 기껏 만들어놓은 기능이 무용지물이 된 것이죠. 왜냐 하면 이 기능은 데이터베이스 언어인 MySQL 5.5.3 버전 이상에서만 가능하기 때문입니다. 많은 웹호스팅은 5.0 아니면 5.1 버전으로 돼있습니다. 5.0은 10년전의 버전입니다. 아직도 이런 구형을 사용하고 있는 곳이 많은 것입니..

DIY! 워드프레스 쇼핑몰 서적에서 사용한 Legenda 테마를 기준으로 설명합니다. 본 블로그의 글은 쇼핑몰 서적에 추가될 예정이므로 복사해 다른 곳에 사용하게 되면 저작권 침해로 불이익을 당할 수도 있습니다. 플러그인 추가하기 화면에서 Woocommerce Quick Buy로 검색해 설치하고 활성화 합니다. 우커머스 설정 - 상품 - WC Quick Buy를 선택하고 설정합니다. 2에서 결제 페이지를 선택합니다. 3에서 Yes로 선택합니다. 4에서 After Add To Cart를 선택합니다. 5의 입력란을 클릭해 두 개의 옵션을 선택합니다. 6의 입력란은 제거합니다. 7에서 바로구매로 입력합니다. 하단에서 저장하기 버튼을 클릭합니다. 바로구매 버튼 우측에 위시리스트 버튼을 추가하고 같은 스타일로 적..

워드프레스로 사이트를 개발하려면 실제 운영 사이트를 만들기 전에 로컬호스트에서 모든 작업을 마치고 웹호스팅이나 서버에 업로드 하는 것이 정상적인 방법입니다. 개발에 능숙한 분들은 바로 서버에서 작업을 할 수도 있습니다. 이럴 경우 콘텐츠가 자주 변경되는데 검색엔진은 한번 크롤링하고 인덱싱을 마치면 다음 크롤링까지 시간이 걸립니다. 만일 불완전한 상태에서 작업을 하면 일부 콘텐츠만 인덱싱 한 상태가 되므로 완전한 콘텐츠가 저장되지 않게 됩니다. 따라서 서버에서 직접 작업할 때는 검색엔진이 크롤링을 하지 못하도록 막아놓는 것이 좋습니다. 또한 로컬호스트에서 사이트가 완성돼 서버에 업로드하고 운영중일 경우 실제 사이트와 똑같은 테스트 사이트를 만들어 여러 가지 테스트를 할 필요도 있을 것입니다. 실제 운영되고..

구글이 작년에 머티리얼 디자인(Google Material Design) 가이드 라인을 발표했습니다. 구글용 웹사이트나 앱에 적용할 통일화된 디자인으로 레이아웃, 스타일, 애니메이션, 등 웹 디자인에 필요한 모든 요소에 대해 정의를 하고 이에 따를 것을 요구하고 있습니다. 바로가기 여기에는 아이콘도 포함되며 700여개의 아이콘이 있습니다. 세세한 부분까지 규격을 만들어놓고 있습니다. 바로가기 색상에 대해서도 정해놓고 있습니다. 바로가기 가능한 디자인과 불가능한 디자인까지 아주 광범위하게 가이드라인을 정해놓아서 앞으로 구글 관련 사이트를 방문하게 되면 통일된 모양을 볼 수 있을 것입니다. 다만 획일적이라는데 문제가 있겠죠. 아이콘은 흑백으로 돼있는데 컬러로 만들어 무료로 배포하는 곳까지 생겼습니다. 128..

포털 사이트는 검색엔진이 생명입니다. 국내 검색엔진은 어느새 쇼핑몰화돼가고 있는 느낌입니다. 포털 사이트를 이용하는 이유는 정보를 알기위해서인데 국내의 대표적인 검색 사이트인 네이버는 이러한 정보를 찾을 수 있는 환경이 없다고 단정할 수 있습니다. 이러다가는 거대 공룡인 구글에 압도당할 것이 분명해집니다. 위 화면은 제 블로그의 유입 경로입니다. 네이버와 구글이 전부입니다. Daum은 어쩌다 한번 있을까 말까할 정도입니다. 1년전에 Daum의 총 유입 수가 8만 정도 였을 때 구글의 유입 수는 7만 정도 였습니다. 그러다 갑자기 구글의 유입이 늘어나더니 이제 2위를 차지하고 있습니다. 증가율이 엄청나죠. 검색인구의 대이동으로 봐도 무방합니다. 2페이지를 보면 구글이 압도적으로 많습니다. 한 페이지에서 네..

부트스트랩 템플릿 중 쓸만한 것이 나타나면 계속 소개하고 있습니다. 이번 템플릿은 컨택트 폼 스크립트까지 포함돼있습니다. 요즘은 HTML 템플릿을 검색하면 거의 부트스트랩으로 만들어진 것만 나타나고 있습니다. 그만큼 부트스트랩의 사용도가 높아지고 있습니다. 세계 최대의 템플릿 사이트인 씸포레스트에서 부트스트랩으로 검색하면 전체 19,000 여개의 템플릿 중 6천여개가 검색됩니다. 거의 3분의 1에 해당합니다. 2년전만해도 엄청 적은 숫자였습니다. 여기에는 워드프레스 테마 등 각종 테마도 포함됩니다. 최근에는 구글의 머티리얼 디자인을 적용한 부트스트랩 테마도 나오고 있습니다. 현재 개발 중인데 디자인이 상당히 좋습니다. https://github.com/FezVrasta/bootstrap-material-..

장면 생성기를 이용하면 나만의 사진을 만들 수 있습니다. 무료 버전의 포토샵 파일을 내려받아 원하는 아이템을 배치해 만들 수 있고 온라인으로 만들 수도 있습니다. Black + Gold Stationary Mock-Up I Am Creator Free Version Creative Scene Generator Free Iso. Art Scene Generator Free Fancy Items Scene Generator Demo 온라인 사이트 http://www.immagipic.com/ 포토샵이 없더라도 온라인으로 만들 수 있습니다. 위 데모 버전의 풀버전을 구매해 만들 수도 있습니다. 좌측에서 카테고리를 선택하면 여러 가지 아이템이 나오고 선택하면 이미지가 나타납니다. 벽부터 시작해 책상, 기타 아이..

부트스트랩 템플릿 6종입니다. 이전의 템플릿보다는 퀄리티가 좀 나은 것 같습니다. 부트스트랩에서 테마란 디자인의 변경을 위한 CSS 파일을 말하는데 우리나라에서는 템플릿을 테마로 부르고 있더군요. 이 테마의 변경만으로 간단하게 디자인이 변경됩니다. 이미 만들어진 부트스트랩 사이트를 위한 파일은 정식으로 말하자면 템플릿으로 해야 합니다. 일부는 다운로드 하려면 SNS에 공유해야 합니다. Seven - HTML Single Page Creative Portofolio Template 다운로드 사이트 데모 사이트 Pluton - Free Single Page Bootstrap Html Template 다운로드 사이트 데모 사이트 Smak - Free HTML single page template 다운로드 사이..

나눔체 중 바른 고딕이 구글에 웹폰트로 등록돼있지 않아 웹폰트로 변환했습니다. 바른 고딕은 4종입니다. 본고딕과 아주 흡사합니다. 구글 드라이브 구글 드라이브에 파일을 업로드 했으니 스타일시트에 아래처럼 사용할 수도 있습니다. 경로가 길어서 구글의 URL 단축기(Shortner)를 사용해봤지만 적용이 안됩니다. 서버에 설치하면 보다 짧아지겠는데 제 서버는 트래픽 제한이 있어서 많은 링크가 있을 경우 감당하지 못할 것 같습니다. @import url("https://googledrive.com/host/0BxmAw3HA4YGCflZpYWI1M3BIYUI2Zm9CUDhKaXVqZGFYV29CQ05xN2pKTlo5YjVWUkJPeWs/nanum-barun-gothic-bold.css");@import url(..

무료 폰트인 서울시체를 웹폰트로 사용하기 위해 몇년 전부터 구글에 연락을 했지만 서울시로부터 폰트만 받고 웹폰트 작업은 이뤄지고 있지 않고 있습니다. 그래서 어쩔 수 없이 웹폰트로 만들어봤습니다. 한글 폰트를 웹폰트로 사용하기란 참 어렵죠. 영문 폰트와는 달리 글자 수도 많아서 개인이 만들기는 거의 불가능하죠. 그나마 무료로 공개된 폰트는 제한이 많습니다. 상업용으로 사용할 수 없다는 것이죠. 네이버에서 무료로 공개된 폰트 목록을 보면 왜 무료로 공개했는지 의심스러울 정도의 제한입니다. 비영리 목적으로 사용하라는데 웹사이트가 대부분이 영리를 목적으로 하는 것이므로 일반 웹사이트에서는 사용할 수 없죠. 웹폰트 만드는 방법은 파일 용량을 줄이고 여러 형태의 확장자를 가진 폰트 파일로 만드는 과정을 거쳐야 하..

부트스트랩 템플릿 12종입니다. 일부 템플릿은 자바스크립트 에러 메시지가 나오고 구글 맵이 나타나지 않습니다. 위 코드에서 key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc& 부분을 제거하고 저장하면 됩니다. Barrier- a business template 다운로드 사이트 데모 사이트 Blue OnePage HTML5 Business Template 다운로드 사이트 데모 사이트 없음 Bondy — Free Multipurpose Bootstrap 3 One Page 다운로드 페이지 데모 사이트 Oleose — Eye Catching Mobile App Landing Page 다운로드 페이지 데모 사이트 SevenApp — Free Beautiful Mobile App La..

어도비가 텍스트 에디터인 브라켓(Brackets)을 내놓더니 마이크로소프트(Microsoft)에서도 텍스트 에디터를 출시했습니다. 어도비는 기본적으로 IDE 급에 해당하는 WYSWIG 편집기인 드림위버(Dreamweaver)를 갖고 있는데 반해 MS는 기본적인 편집기가 메모장 또는 노트패트 정도 밖에 없었습니다. 하지만 전문적인 편집기에 해당하는 비주얼 스튜디오가 있습니다. 이들 두 가지 프로그램은 무겁고 유료이며 러닝커브(Learning Curve: 프로그램을 사용하기 위해 배우는데 걸리는 시간)가 상당합니다. 코드를 작성하기 위해 해당 프로그램을 사용하는 방법을 배워야 하죠. 하지만 텍스트 편집기는 기본적인 사용법만 알아도 바로 코드를 작성할 수 있습니다. 이들 거대 회사들이 텍스트 편집기의 중요성을..

웹사이트에서 아이콘은 주로 이미지를 사용해왔습니다. 몇 해 전에 폰트 아이콘이 등장하면서 이미지 아이콘이 사라지는 듯 싶더니 다시 이미지로 전환되고 있는 추세입니다. 이미지도 그냥 이미지가 아닌 SVG 이미지입니다. 폰트 아이콘은 폰트로서의 기능을 그대로 구현합니다. 즉 색상이나 크기 변경이 가능한 것이죠. 아무리 크게 해도 흐려지거나 깨지는 일이 없습니다. 가장 큰 단점은 하나의 아이콘으로 다양한 색상을 만들 수 없다는 것입니다. 한가지 색으로만 아이콘이 만들어지는 것이죠. SVG는 Scalable Vector Graphics의 첫 글자로 크기 변경이 가능한 벡터 이미지를 의미합니다. 벡터는 그래픽 디자인에서 크기가 변경되면 수학적 계산에 의해 이미지를 재생성하는 역할을 합니다. 보통의 이미지는 크기가..

우리가 사는 세상은 폰트와 관련하여 두가지 미디어로 분류됩니다. 하나는 인쇄물을 통한 미디어이고 다른 하나는 웹을 통한 미디어입니다. 인쇄물을 통한 미디어는 주로 명조체를 사용하고 웹에서는 고딕체를 사용합니다. 다 이유가 있더군요. 우선 폰트를 구분하는 명조체와 고딕체, 이에 더하여 자유체에 대해 알아보겠습니다. 폰트와 관련하여 동일한 의미의 많은 용어가 있습니다. 폰트는 영어이고 한글로는 가장 많이 사용하는 것이 한글인 "글꼴"이 있고 한문으로는 "서체(書體)"가 있으며 영어를 많이 사용하다보니 글꼴이라는 순수 한글로 사용하는 이도 많습니다. 제 경우는 폰트라는 단어가 익숙하기 때문에 책에서도 폰트라는 단어를 사용하지만 출판사에서 리뷰할 때는 글꼴로 전환하려고 해서 의견 충돌이 자주 있습니다. 제 경우..