어띠의 블로그

이번 포스팅에서는 카페24 쇼핑몰에 네이버톡톡과 카카오톡채널(구 플러스친구) 배너 넣는 방법을 알아보겠습니다. 소스코드는 스크립트가 아닌 html/css 를 통해 작성할 예정입니다. 먼저 네이버톡톡과 카카오톡채널 각각의 관리자페이지에서 상담 링크를 구해보겠습니다. #1 네이버톡톡 상담 링크 구하기 1 네이버톡톡 파트너센터 페이지https://partner.talk.naver.com에 접속해 시작하기 버튼을 클릭합니다. 2 내 계정 하단에서 채팅 URL을 복사할 수 있습니다. #2 카카오톡채널 상담 링크 구하기 1 카카오톡채널 관리자센터 페이지https://center-pf.kakao.com/에 접속합니다. 2 홍보하기 메뉴 > 1. 채널 홍보하기 중 링크 복사하기에서 복사하고 싶은 URL을 복사합니다. ..

최근 보안 문제 등과 관련하여 SSL 인증서 설치를 권장하고 있습니다. SSL은 브라우저와 서버 간 통신에서 정보를 암호화하여 정보유출에 대비한 보안 솔루션입니다. SSL 이 설치된 사이트는 http://가 아닌 https://로 연결됩니다. 따라서 사이트에 접속 시 무조건 https 로 접속하게 하기 위해서는 1. SSL 인증서가 설치되어 있어야 합니다. (카페24 FAQ > SSL 인증서는 어떻게 신청하나요?) 2. 사이트 내 http:// 링크를 // 형태로 모두 변경해야 합니다. 3. SSL 인증서가 설치된 도메인에 리다이렉트 설정을 활성화시켜야 합니다. (상점관리 > 기본정보관리 > 도메인 설정 > 각 도메인 별 리다이렉트 설정) 위와 관련된 자세한 매뉴얼을 카페24에서도 제공하고 있으니 참고하..

일러스트레이터에서 로고를 만들고 배경이 투명한 png 파일로 저장한 다음 카페24 쇼핑몰에 적용하는 방법을 알아보겠습니다. #1 일러스트레이터에서 로고 만들기 먼저 일러스트레이터 프로그램에서 로고를 만들어보겠습니다. 저는 가로 500px X 세로 100px 의 도큐먼트를 열어 작성해보겠습니다. 도큐먼트 사이즈는 나중에 조절가능하므로 크게 신경 쓰지 않아도 괜찮습니다. 원하는 폰트로 로고를 적었다면 도큐먼트의 사이즈를 다시 한번 조절해주겠습니다. * 혹시나 ai 로고 파일을 디자인 업체나 다른 사람에게 전달한다면? 저장에 앞서 글자를 깨주는 단계가 필요합니다. 이를 윤곽선 만들기 또는 Create Outlines 이라고도 하는데, 작성된 텍스트를 '도형'으로 만들어주는 단계입니다. 이 과정을 거치지 않고 ..

카페24에서 무료로 제공하는 인스타그램 위젯을 이용해 쇼핑몰 하단에 인스타그램 피드를 노출시킬 수 있습니다. 한때 인스타그램에서 개인 계정으로 지원하던 연동 api 지원 중단으로 서비스가 종료되기도 하였지만 인스타그램 계정을 프로페셔널 > 비즈니스 계정으로 전환하여 사용하는 경우 연동 가능하도록 다시 지원되고 있습니다. #1 인스타그램 위젯 설치하기 먼저 카페24 관리자 페이지의 앱스토어 메뉴에 접속하여 앱스토어 시작하기 버튼을 클릭합니다. 이용약관에 모두 체크 표시한 후 동의 버튼을 클릭하면 기본 앱이 자동 설치되고 기존의 '앱스토어 시작하기' 버튼이 '앱스토어 바로가기' 버튼으로 바뀐 것을 볼 수 있습니다. 앱스토어 바로가기 버튼 클릭 > 우측 상단에서 '인스타그램' 을 검색 > '인스타그램 위젯' ..

이전 포스팅에서 파일질라 ftp 프로그램을 이용하여 이미지 파일을 업로드하고 해당 이미지를 불러와 카페24 쇼핑몰 메인에 넣어보았습니다. 이때, 쇼핑몰에 배너가 정상적으로 보이지 않고 엑박으로 뜨는 경우가 있습니다. 이번 포스팅에서는 ftp로 업로드한 이미지가 확인되지 않을 때 체크해야 할 항목들에 대해 알아보겠습니다. #1 '업로드한 경로 = 작성한 이미지 태그 내 경로' 일치 여부 /web/upload/test 파일에 업로드해놓고는 이미지 태그에서는 src="/web/upload/text/~" 로 적을 수 있습니다. 소스를 작성하다 보면 이렇게 간혹 오타가 나기 마련입니다. 정확한 소스 작성을 위해서는 타이핑 대신 파일질라에서 경로를 바로 복사하여 붙여 넣을 수 있도록 습관을 들이는 것이 좋습니다. ..

내가 만든 이미지 배너를 쇼핑몰에 사용하기 위해서는 서버(파일 저장 공간)에 파일을 업로드해야 합니다. 이때 내 컴퓨터와 서버 간 파일 전송을 도와주는 서비스를 FTP라고 합니다. 카페24 쇼핑몰 관리자 페이지에서도 웹 FTP를 제공하고 있으나 익스플로러에서만 이용이 가능합니다. 그래서 보통 익스플로러 외 크롬, 사파리 등의 브라우저를 이용한다면 FTP 프로그램을 사용해야 하는데, 파일질라는 대표적인 FTP 프로그램 중 하나이며, 윈도우와 맥에서 모두 무료로 사용이 가능하기 때문에 추천하는 프로그램입니다. #1 파일질라 설치하기 구글에서 '파일질라' 라고 검색하여 파일질라 홈페이지로 들어갑니다. 일반적인 파일 전송 프로그램을 사용할 것이므로 좌측의 client 용을 클릭해줍니다. 다운로드 버튼을 클릭합니..

이번 포스팅에서는 카페24 상품 이미지 꾸미기 기능에 대해 알아보겠습니다. # 상품 이미지 꾸미기 기능 카페24 쇼핑몰에서 상품에 아이콘을 적용하는 방법은 크게 두 가지입니다. 하나는 상품 썸네일 아래 상품 정보 부분에 아이콘을 추가하는 방법이고, 이 부분은 쇼핑몰 운영시 거의 대부분이 많이 알고 또 사용하고 있는 기능입니다. 나머지 하나는 아이콘을 상품 썸네일 위에 겹쳐서 노출할 수 있는 '상품 이미지 꾸미기' 기능인데 이 기능은 잘 모르는 분들이 많으신 것 같습니다. 이 기능을 이용하면 썸네일 위에 할인이나 자체제작 또는 품절 상품 등의 아이콘을 운영 방식에 따라 다양하게 이용할 수 있습니다. 또 아이콘이 적용되는 기간을 설정할 수 있어 할인 기간이 정해져 있거나, 판매 전 사전 공개 제품 등에 이용..

이번 포스팅에서는 파비콘 만드는 방법과 카페24 쇼핑몰에서 등록하는 방법을 알아보겠습니다. #1 파비콘이란? 파비콘은 즐겨찾기(favorites)의 'fav'와 아이콘(icon)의 합성어로 브라우저 주소창 왼쪽 노출되는 16px X 16px의 작은 아이콘입니다. 또한 브라우저의 열린 탭 목록 및 북마크 목록에서 사이트 이름 옆에 표시되는 경우가 많기 때문에 사용자가 사이트를 쉽게 식별할 수 있습니다. 파비콘의 확장자는 ico 인데, 이 ico 는 포토샵에서는 저장할 수 없는 파일 형식이기 때문에 png나 gif 등의 이미지로 제작한 다음, 파비콘 변환 사이트를 통하여 확장자 변환을 해주어야 합니다. #2 파비콘 예비 이미지 만들기 먼저 포토샵에서 png 이미지를 만들어 보겠습니다. 파비콘은 16px X ..

백그라운드에는 여러 가지 css 속성이 있습니다. 그중 컬러, 이미지, 반복 여부, 위치, 사이즈 등의 속성이 가장 많이 사용되며, 이 속성들은 background 라는 하나의 속성으로 조합하여 작성할 수 있습니다. 속성 하나하나를 개별로 작성할 수도 있지만 최대한 간결하게 작성하는 것이 추후 유지관리에도 효율적입니다. # background css 작성 방법 background 속성 값은 '색상 이미지 반복 여부 위치 / 사이즈' 순서대로 작성할 수 있습니다. 컬러 속성 같은 특정 속성 값은 순서에 관계없이 작성할 수 있지만 위 순서를 기본값으로 생각해두고 작성하는 편이 좋습니다. background:#fff url(/web/upload/test/btn_down.png) no-repeat right 3..

모든 상품 상세페이지의 상단 또는 하단에 공통적으로 배송, 쇼핑몰 이용 관련 안내 이미지나 중요한 공지 이미지를 노출하는 방법입니다. #1 FTP 에 이미지 업로드 1 먼저 이미지를 준비한 후 FTP에 업로드합니다. 저는 web 폴더 내 upload 폴더에 test 라는 폴더를 만든 후 test 폴더에 detailImg.jpg 라는 이미지 파일을 업로드했습니다. 이제 스킨 소스창에 접속하여 이 이미지가 노출될 수 있도록 이미지 태그를 작성해보겠습니다. #2 이미지 태그 작성하기 기본 이미지 태그는 아래와 같이 작성됩니다. 앞서 /web/upload/ 폴더에 test 폴더를 만든 후 test 폴더에 이미지를 업로드했으니 경로는 /web/upload/test 가 되고, 이미지 파일명(확장자 포함)은 deta..