엔트리

WordPress 해외 쇼핑몰 제작(9) : 메일서비스 설정

5월 16, 2018 /0 코멘트/카테고리: /작성자:

해외 웹 호스팅에 가입해서 여러가지 설정들을 알아보고 있습니다. 이번에는 호스팅 서비스에서 제공하는 웹메일 서비스 계정을 만들고 사용해 보겠습니다.   1. e-mail 계정 생성 도메인 연결까지 문제 없이 끝났다면, 계정@도메인으로 구성된 이메일 주소를 사용할 수 있습니다. 기본 서비스(월 약 5,000원대)의 사용으로도 이메일의 무제한 이용이 가능합니다. 그럼 이메일 계정을 먼저 만들어 보겠습니다. c-Panel에서 Email 관련 아이콘이 많이 있습니다. 필요한 것은 Email Accounts입니다. 신규 이메일 계정을 만들거나 설정/수정이 가능합니다. Email 계정 이름을 지정합니다. 보통 홈페이지는 admin이라는 계정을 많이 사용하는데, 너무 흔한 계정의 경우 스팸이나 해킹에 노출되기 쉽습니다. 본인의 이름이나 다른 글자를 앞,중간,뒤에 넣어 구성하시길 권합니다. Password는 보안을 위해 어렵게 지정할수록 좋겠지요. 너무 낮은 보안 등급일 경우 에러 메시지가 나타납니다. 이메일의 용량을 지정합니다. 보통은 Unlimited로 지정하는 경우가 많으며 타 호스팅 업체의 경우에서 따로 무제한에 대한 옵션이 없을 경우, 0을 입력하면 무제한으로 적용되는 경우가 많습니다. 이렇게 완성 된 이메일 주소는 계정명@도메인.com의 형태를 띄고 있습니다.   2. e-mail 활용 (웹메일) 그럼, 이 메일로 로그인을 해 보겠습니다. 접속은 c-Panel에서도 가능하지만 도메인/webmail의 경로로접속이 가능합니다. 즉, abc.com이 내 도메인이라면, http://abc.com/webmail 로 접속하면 웹메일 페이지로 진입할 수 있습니다. 웹메일 서비스는 Horde, Roundcube, SquirrelMail 로 세가지를 사용할 수 있고, Set as Default를 클릭해두어 기본 메일 서비스로 설정할 수 있습니다. 물론 상단의 이메일 계정을 클릭해서 Default값을 언제든지 변경할 수 있습니다. 세 웹메일 서비스는 큰 차이는 없고 사용자 인터페이스 화면에 차이가 있고,기본적으로 메일을 읽고 쓰기에는 별 차이가 없습니다.     3. e-mail 활용 (아웃룩) 웹메일은 내 이메일을 웹상에서 관리할 수 있는 것이고, 내 휴대폰이나 컴퓨터 상에서 보고싶을 경우에는 별도의 설정이 필요합니다. Mail Client Automatic Configuration Scripts 에서 그 내용을 확인할 수 있습니다. 윈도우10이나 최신버전의 아웃룩에서는 계정 정보 입력으로 대부분의 설정이 완료되고 아이폰이나 iOS, Windows Live mail등 여러 다른 클라이언트에서는 별도의 설정값을 저장해주는 파일을제공합니다. 아니면 아래쪽의 Mail Client Manual Settings 에서 수동으로 설정이 가능합니다. 물론 아웃룩 외에도 타사의 메일 서비스에서도 외부 메일 가져오기 서비스 등을 통해 하나의 메일 함에서 이메일 사용이 가능합니다. Gmail, Naver, Daum 등에서 해당 기능을 지원합니다. 저는 Gmail에서 외부메일 가져오기를 실행 해 보았는데, 단점으로는 이메일의 수신량이 적을 경우 업데이트 주기가 길어서 실시간 메일에 대응하기 어려웠던 기억이 있습니다.   4. 보안 설정 SSL/TLS 흔히들 웹브라우저의 주소창에 나온 녹색의 ‘안전함‘ 이라는 글자는 단순히 안전한가보다…하고 넘어가기엔 복잡하고 많은 기술들이 집약되어 있습니다. 저도 자세한 내용은 잘 모르고 사용하고 있지만, 주요 내용은 http와 https라는 단 한 글자의 차이에서 시작됩니다. 웹사이트 로그인 할 때, 카드 번호를 입력 할 때 등 사용자가 민감한 정보를 입력하는 경우는 생각보다 많습니다. 이럴 때에 네트워크 상에서 누군가가 사용자의 입력 정보를 가로챌 수 없게 하는 것이 SSL/TLS 보안 설정이라고 합니다. 이 부분은 웹페이지에서는 필수적인 요소이며 사이트의 신뢰도에도 큰 영향을 끼칩니다. […]

모바일 웹페이지의 로딩 속도 측정

5월 10, 2018 /0 코멘트/카테고리: /작성자:

 지난 번에는 웹사이트의 모바일과 데스크탑에서의 웹페이지의 속도를 측정했습니다. 지난 번 Pagespeed insights 는 기계적이고 정석에 최대한 맞는 결과만이 100점에 가까운 결과를 나타낼 수 있을 뿐이기때문에, 구글 자신들의 웹페이지도 전부 다 100점을 기록하지는 못합니다. 따라서 너무 직접적인 결과에 좌절하지 마시라고 이번에는 조금은 덜 노골적인 사이트 테스트 툴을 소개합니다. (사실 더 노골적일수도…) 1. 모바일 웹사이트 속도 및 성능 테스트 – Google 지난 번 테스트 툴은 모바일과 데스크탑의 세부적인 개발과 속도 향상, 최적화를 위한 종합 진단이었다면, 이번에는 모바일 웹사이트 속도를 테스트하기 위한 툴 입니다. https://testmysite.withgoogle.com/intl/ko-kr 더 이상 언급이 귀찮을 정도로, 모바일 페이지의 중요성은 급증하고 있습니다. 당연히 그럴 수록 웹페이지의 속도도 중요하겠죠. 모바일 웹페이지의 속도를 측정하는 위의 페이지에서는  “대부분의 사이트에서 방문자의 50%가 페이지 로드 중에 사이트를 떠납니다.” 라는 무시무시한 팁도 던져주고 있습니다. 그럼 실제로 테스트 해 볼까요? 2. 테스트  한 1년전 쯤, 워드프레스와 테마를 설치만 해 두고, 첫 페이지를 건들지도 않은 웹사이트로 한번 테스트 해 보겠습니다. 첫 페이지는 동영상에, 수많은 테마 소개 사진이 있어, 심각한 속도 측정 결과가 나오지 않을까 싶습니다. 3. 속도 측정 과정 페이지를 스캔하는 과정을 거친 후에는 일반연결(3G)로 접속했을 경우로 테스트 합니다. 유선을 통한Wifi 뿐 아니라 3G나 LTE망을 통한 웹페이지의 접속은 지속적으로 늘어나겠지요. 이에 대한 별도의 테스트를 시행합니다 그 후 사이트 내부의 데이터를 분석합니다. 분석 항목들은 지난 번, 사이트 속도 측정과 크게 다르지 않은 부분입니다. 이번에는 모바일 사용 편의성에 대해 테스트 합니다. 컨텐츠가 표시되는 영역은 괜찮은지, 텍스트의 가독성은 괜찮은지 등, 여러 방면으로 테스트를 거치게 됩니다. 이번 테스트에서 나름 괜찮은 것은, 유사사이트와의 비교분석입니다. 내 사이트와 타 유사 사이트와의 기준치를 비교하여 어느정도 더 빠른지 느린지를 가늠할 수 있습니다.   4. 분석 결과 예. 워드프레스와 테마 설치 후 아무것도 안 건든 상태라 그런지, 결과가 상당히 나쁘게 나왔습니다. 3G에서 로딩 시간은 나쁨으로, 10초정도 소요되어 방문자들이 로드시간 때문에 22%정도 손실되는 결과를 나타냈습니다. 이 툴에서는 타 사이트들, 특히 유사 업종에서 성능이 상위권인 사이트들과 로딩 속도를 비교하여 알려줍니다. 물론 유사 사이트 카테고리는 변경 가능합니다. 해결방안을 살펴보아, 사이트 로딩 시간을 줄일 수 있는 방법을 알아볼 수 있습니다. 저는 3초를 더 줄일 수 있는 방법이 있다고 하네요. 위의 내용을 이메일을 통해 개별 보고서로 받아볼 수 있습니다. 그 안에는 세부적으로 어떤 항목을 고쳐야 하는지 설명이 있고, 링크와 함께 상세한 가이드도 제공합니다(물론 영어입니다) 내용은 Speed insight와 크게 다르지 않아보입니다. 5. 결론 한국인의 습성이 빨리빨리라고는 하지만, 전 세계적으로도 웹사이트의 로딩 속도는 한국인 뿐 아니라 대부분의 사용자에게 있어서 중요한 요소입니다. 데스크탑과 모바일 웹페이지의 구분이 점점 모호해지고 있지만, 모바일에 특화하여 홈페이지를 최적화 하는 것도, 앞으로 늘어나는 모바일 사용자에게 좋은 경험을 제공함에 있어, 큰 도움이 될 것입니다.  

내 웹사이트 속도 분석

5월 10, 2018 /0 코멘트/카테고리: /작성자:

국내나 해외 판매를 위해서, 혹은 회사의 운영을 위해서는 쇼핑몰이든, 회사 소개 페이지든, 자사의 도메인을 보유하고 홈페이지를 운영하게 됩니다. 인터넷 상의 무수한 웹사이트들은 각자의 특성을 갖고 있으며 디자인, 기능 들에서 차별화를 두고자 합니다. 물론 여기에서 또 중요한 것이 바로 접속 속도입니다. 누군가가 내 웹사이트를 접속 했을 때에 첫 페이지의 첫인상이 중요하기 때문에 여러 디자인과 컨텐츠를 구성하지만, 접속 속도가 느리다면 첫인상을 전하기는 커녕 이탈만 늘어날 뿐입니다.  한참의 로딩을 버티지 못해 이탈하는 고객을 잡기 위해, 또한 실제 웹사이트의 간결한 운영과 실제 쇼핑몰에서의 구매, 홈페이지의 정보 전달의 효율성을 위해서는 웹페이지의 최적화를 통해 빠른 속도의 제공은 필수적입니다.  이에, 여러 기업에서 웹페이지의 속도를 측정하고, 소스를 분석하여 불완전한 요소들을 지적해주고 변경을 제안하는 툴을 제공하고 있습니다.  이번에는 그 중 간단하고 직관적으로 페이지 속도의 평가를 알아볼 수 있는 분석 툴인 Google PageSpeed Insights 를 소개합니다. Google PageSpeed Insights PageSpeed Insights 는 구글의 설명으로는 “PageSpeed Insights 정보 PageSpeed Insights는 웹페이지의 콘텐츠를 분석하여 페이지의 속도를 개선할 수 있는 방법을 추천해 줍니다.” 라고 합니다.  구글에서 제공하는 수 많은 서비스 중, 개발자(developers) 에게 제공되는 유용한 툴이 많습니다. 그 중개발자가 아니더라도 쉽게 접근하여 활용할 수 있는 PageSpeed Insights는, 비교적 어렵지 않게 접근이 가능합니다. 링크 https://developers.google.com/speed/pagespeed/insights/ 사용법  기본 사용법은 간단합니다. “웹 페이지 URL 입력” 이라는 검색란에 분석하고자 하는 웹사이트 주소를 넣고 “분석“을 클릭하면 분석이 시작됩니다. 내 홈페이지 뿐 아니라, 다른 웹사이트도 URL만 넣으면 분석이 가능합니다. 예시 사이트로 네이버를 넣어볼까요. (http:// 등을 넣지 않아도 자동으로 들어갑니다.)  웹사이트 주소를 입력하는 것에서 분석이 시작됩니다. 수 초 내의 분석이 완료 되면 아래와 같은 분석 결과가 나타납니다. 모바일과 데스크탑으로 나뉘어 분석하며 가장 상단에 나타내어 약간은 잔인하게 그 결과를 표시해 줍니다. 위의 결과를 보니, 많은 부분에서 최적화가 부족하다고 말 하고 있습니다. 각 항목에 대해 어떠한 부분에서 최적화가 되어있지 않은지 알려주고, 그에 따른 해결 방법을 제시합니다. “해결 방법 보기” 를 클릭하면 상세한 설명이 나타납니다. 이미지의 경우, 이미지를 최적화 하여 줄일 수 있는 이미지의 용량, 감소 비율 등을 각 파일마다 나타내고 링크로 나타난 “다음이미지를 최적화 하면” 을 클릭해서 구글에서 안내하는 최적화(이미지 압축)의 방법을 설명하는 안내 페이지로 넘어가서 상세한 설명을 확인할 수 있습니다. 다만 해당 내용은 자바스크립트 삭제, CSS에 대한 부분, 캐싱이나 서버의 응답시간 단축 등, 접근이 어렵거나 개발자가 아닌 웹사이트의 관리자 측면에서 약간은 접근하기 어려운 부분도 있습니다. 분석 효과 PageSpeed Tool은 페이지를 최적화 시켜주는 툴이 아닙니다. 웹사이트에 접속하여 속도를 측정하고 느리게 하는 요소가 무엇인지 분석하여 표시할 뿐입니다.  또한 실제로 모든 점수를 만족하는 웹사이트는 생각보다 그리 많지 않습니다.  예를 들어, 구글의 자사 사이트인 google.com으로 분석해보겠습니다. 구글의 모바일 첫 페이지는 단순히 검색창만 나타난 사이트입니다. 그럼에도 불구하고, 또한 구글의 대표적인 첫 페이지인데, 모바일에서 78점으로, Needs Work가 표시됩니다. (데스크답은 89점으로 Good 점수를 받았습니다. 분석은 말 그대로 분석입니다. 이를 바탕으로 웹사이트에서 중요하게 바꿔야 하는 부분을 수정하고, 조금씩 완성해 나가는 것이 최적화의 첫 걸음입니다.   

해외 쇼핑몰을 위한 쇼핑몰 Themeforest

5월 10, 2018 /0 코멘트/카테고리: /작성자:

해외 쇼핑몰 구축을 위해 여러 솔루션을 사용할 수도 있고 ,직접 구축할수도 있습니다. 하지만 모든 테마, 기능, 효과 등을 자체적으로 개발할 수는 없습니다. 물론 능력과 시간이 넘친다면야 직접 모든걸 할 수 있지만, 바쁜 CBT셀러들은 슬퍼한 시간, 아니 모든 일을 한번에 할 수 없기 때문에 간단한 절차를 통해 일단 시작할 수 있는 방법이 필요합니다. 여러 해외 쇼핑몰 솔루션들 중, Shopify를 가장 먼저 소개했던 이유도 이와 같습니다.  이번에는 각종 테마, 플러그인 등, 해외 쇼핑몰, 홈페이지 등의 구축에 필수 불가결한 요소들을 구매할 수 있는 쇼핑몰을 위한 쇼핑몰인 Themeforest에 대해 알아보겠습니다.   1. Themeforest? 고…곰발바닥?  Themeforest.net은 Envato market 이라는 사이트에서 운영하는 여러 마켓 중 하나입니다. Themeforest는, 그 이름에서도 알 수 있듯이 Theme, 즉 웹사이트의 테마를 사고 팔 수 있는 사이트입니다. 개발자가 테마를 제작하고 위의 사이트에서 판매하게 되면 구매자는 가입, 결제 후 해당 테마를 사용할 수 있습니다. 흔히 Wordpress의 테마를 구매하기 위해 많이 방문하지만 Wordpress 쇼핑몰 플러그인 WooCommerce 외에도 Magento, Shopify, PrestaShop, BigCommerce, CS-Cart 등등, 여러 e-Commerce 의 테마들을 찾을 수 있습니다.  또한 Themeforest는 envato market의 일부이기 때문에 themeforest 외에도 Codecanyon, Videohive등의 웹사이트 제작이나 운영에 필요한 각종 소스, 사진, 3D모델, 플러그인, 음악, 비디오 등, 여러 기능들을 구매할 수 있는 다른 마켓도 이용할 수 있습니다.   2. 유료? 무료?   예. 일단 기본적으로 유료인 마켓입니다. 테마 하나를 개발 하는데에는 단순히 뚝딱 하며 약간의 시간을 들이는 것이 아니라, 여러 기능도 만들고 데모 데이터, 매뉴얼 등을 제작하는 공을 들입니다. 이 외에도 다른 추가 기능들의 경우도 무료 보다는 유료 기능들이 그 품질이나 이용에 우수함이 있어, 무조건 무료인 경우 보다는 부담스럽지 않은 수준에서 유료로 사용하기 적합합니다.   또한, 한달에 몇 가지의 상품을 무료로 제공합니다. 예를 들면 8월의 무료 아이템은 Themeforest에서 피자,음식 쇼핑몰을 위한 PSD Template를 제공하고, AudioJungle 에서는 Future Beauty 라는 음원을 제공합니다. 다른 파트에서도 마찬가지로 무료로 특정 아이템을 제공합니다. 다만 사용 전 라이선스 정책과 사용 범위를 확인하세요. 3. 구매 방법 일반적인 Wordpress 테마를 하나 구입한다고 가정해 보겠습니다. 사이트를 방문하여 가입, 이메일 인증, 로그인 과정을 거치게 되고, 그 이후 Wordpress 탭으로 들어가서 원하는 카테고리로 선택하여 들어갑니다. 내 홈페이지의 주제에 맞는 테마를 구매할 수 있습니다.  만약 Woocommerce에 맞는 테마를 구매하려면 Wordpress 탭이 아닌 eCommerce 탭에서 찾는 것이 편합니다. 물론 WooCommerce 카테고리로 들어가서 찾아야 하겠지요.   4. 가격과 기능은?  일반적인 Wordpress의 Woocommerce 테마의 가격은 $59~69 정도에 형성되어 있습니다. 몇 년 전에 비해 가격은 조금씩 오르고 있는 추세이며(그래봐야 $45에서 $10정도 올랐습니다) 테마의 경우는 한번 구매 시에, 버전업이 되어도 지속적으로 업데이트와 제작사의 지원을 받을 수도 있습니다.   또한 테마에 여러가지 추가 플러그인이 포함되는 경우가 많습니다. 흔히 드래그로 쉽게 구축할 수 있는 웹사이트 빌더(에디터)나 페이지 빌더와 같은 플러그인, 슬라이드 플러그인 등을 기본적으로 포함하고 있습니다. 여기에 Demo Data 들을 포함하고 있어, 쇼핑몰을 구축하고 황량한 빈 화면을 만나도 당황하지 않도록, Import data를 통해서 샘플 쇼핑몰의 맛을 볼 수 있습니다.  테마 구입 후에는 구매 목록에 해당 테마를 구입한 기록이 남아 있으며 추후에도 다시 다운 받아 설치할수 있습니다.  결제는 페이팔, 신용카드 결제가 가능하며 ($2의 추가 수수료 부과), Envato Credit 이라는 일종의 적립금을 충전하여 사용하면 수수료는 없습니다. 5. 보증과 라이선스 제도는?  물론 영문이지만 테마 제작사로 부터 지원을 받을 수 있습니다. 직접적인 이메일 등의 지원은 1년이나6개월 등의 제한을 두고 있지만, 포럼이나 댓글 등을 통해 제작사와 소통이 가능합니다. 또한 각 테마에 맞게 User Guide를 제공하고 있어, 처음 설치방법 부터 상세 설정까지 동영상이나 사진이 첨부된 게시글을 확인할 수 있습니다.  라이선스는 일반 라이선스의 경우는 구매 후 자사의 쇼핑몰에 설치, 운영하는 것이 가능하나, 테마를 재판매 한다거나, 홈페이지를 제작하여 재판매하는 경우에는 Regular license 가 아닌 다른 […]