워드프레스 쇼핑몰의 정기결제 상품이 다양해지고 있습니다. 최근 진행 중인 정기결제 쇼핑몰중 하나는 커피제품이고 다른 하나는 가구입니다. 커피는 매일 소비하는 소모품이다보니 이해가 가지만 가구도 정기결제 상품으로 가능할까? 생각해보니 임대형태로 한다면 가능하지 못할 것도 없더군요. 해외 사이트를 벤치마킹하여 사업 아이템으로 시작하는 경우입니다. 이번 글에서는 제작이 완료된 커피 정기배송 쇼핑몰의 사례를 알아보겠습니다. 홈 페이지 화면입니다. 이번 프로젝트에서는 의뢰인이 일부 페이지는 직접 작업하신다고 하여 코딩 없이 페이지 빌더로 가능한 부분은 이미지만을 사용해 만든 페이지입니다. 사실 텍스트를 반응형 디자인에 맞게 조절하는 것이 작업 분량이 많습니다. 큰 화면에서는 큰 글자로, 작은 모바일에서는 줄이 바..

최근 필자의 티스토리 스킨을 구매하신 고객님이 인터넷 익스플로러에서 스킨이 제대로 보이지 않는다 하여 수정을 요청하셨습니다. 아무리 해도 수정할 방법이 없어서 사용중인 기능을 비활성화 하시라고 안내를 하였지만 결국엔 스킨의 사용을 포기한 것으로 보입니다.국내에서 아직도 많이 사용하고 있는 인터넷 익스플로러(Internet Explorer)는 더 이상 브라우저로서의 기능을 하지 않으니 사용하지 말라고 합니다. 이것은 인터넷 익스플로러의 개발사인 마이크로 소프트의 보안 전문가가 말한 것입니다. https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/다만 오래된 웹사이트에서..

워드프레스 쇼핑몰을 많이 제작해봤지만 디지털 상품은 많지는 않습니다. 제가 필요에 의해 티스토리 스킨 쇼핑몰을 만들었고 클라이언트가 요청해 제작한 것은 이번이 처음입니다. 디지털 상품은 배송이라는 과정이 필요 없고 주문 결제 후 바로 다운로드가 가능합니다. 간단한 구조이지만 여러 가지 상품을 한번에 선택해서 바로 결제하는 기능이 필요하기에 이 기능을 위한 플러그인이 필수입니다.평범한 홈 화면입니다. 특별한 기능을 알아보면 다음과 같습니다.전체 교재 검색 화면입니다. 일반쇼핑몰의 Shop 화면에 해당합니다. 제목을 클릭하면 상세페이지로 가지만 방문자에게는 필요 없으므로 링크를 제거했습니다. 관리자에게는 편집을 위해 필요합니다. 모든 상품을 한번에 체크해 장바구니에 넣을 수도 있고 개별적으로 여러 개를 선택..

베트남의 일출 윈도우 10을 사용하면서 로그인화면(Welcome/Lock Screen)에 나타나는 이미지가 참 멋지다는 생각을 하곤 했는데 이 이미지를 블로그에 사용할 수 있을지 구글에 검색해봤습니다. 아래처럼 개인용도라면 얼마든지 사용이 가능하다고 합니다. 상업용 사이트에는 사용이 불가는하다는 얘기죠. https://answers.microsoft.com/en-us/windows/forum/all/windows-spotlight-and-bing-and-windows-10/13a1647c-677c-4781-b88f-dfba2e19290e The Windows 10 wallpaper photo files are owned or licensed by Microsoft for the personal non-c..

이전 글에 이어서 이번 글에서는 환경설정과 SSL 사용에 대해 알아보겠습니다. 환경설정은 앱의 좌측 상단 햄버거 아이콘을 클릭하고 Preferences를 선택합니다. New site Defaults 탭을 선택하고 새 사이트 만들 때 필요한 설정을 합니다. 도메인 서픽스를 많이 사용하는 .com으로 변경합니다. Sites Path의 Browse를 클릭해 사이트가 저장될 폴더를 지정할 수 있습니다. 이 설정으로 인해 새 사이트를 만들 때 시간이 걸리기도 합니다. 나머지는 원하는 설정으로 변경해주면 됩니다. 완료되면 Apply 버튼을 클릭하고 우측 상단의 X 아이콘을 클릭합니다. 사이트 이름에 우클릭하면 메뉴가 나타나며 여러 가지 작업을 할 수 있습니다. Clone을 선택하면 해당 사이트를 복제할 수 있고 S..

워드프레스 웹사이트를 개발하기 위해서는 대부분 개발자의 컴퓨터에서 서버 환경을 만들어 워드프레스를 설치합니다. 제 경우 윈도우 환경이라서 오토셋(Autoset)이나 WAMP 서버를 사용하는데 전혀 새로운 개념의 WAMP 서버가 있어서 소개합니다. 맥 환경에서도 사용할 수 있도록 버전이 별도로 있습니다. https://local.getflywheel.com/ 위 링크로 이동하면 아래와 같은 화면이 나옵니다. 상단의 Download나 Free Download 버튼을 클릭합니다. 정보를 입력하고 하단의 사이트 수(Number of Websites)는 30개 이상을 선택합니다. Get It Now! 버튼을 클릭하면 파일이 다운로드 됩니다. 600MB에 달해서 시간이 30분 정도 걸립니다. exe 파일을 클릭하면..

티스토리 스킨 Flat Kit에 인스타그램 위젯을 추가했습니다. 커버 아이템화해서 홈 페이지에서 원하는 곳에 배치할 수 있습니다. 데모 사이트 : https://martiankr2.tistory.com/ 콘텐츠 영역에 배치하고 썸네일을 4개로 설정한 형태입니다. 썸네일을 클릭하면 큰 이미지로 볼 수 있고 내비게이션도 가능합니다. 동영상도 볼 수 있습니다. 썸네일에서는 커버이미지만 나타나고 클릭하면 동영상으로 나옵니다. 커버 아이템 추가시 인스타그램 슬라이더를 선택하고 콘텐츠는 직접입력을 선택한 다음 타이틀만 입력하고 저장합니다. 옵션에서 인스타그램 UserId와 access Token을 추가해야 합니다. 슬라이드 수는 슬라이드의 위치에 따라 변경할 수 있게 했습니다. 커버 아이템들이 위치하는 곳에서 어느..

다음 카카오 이메일을 이용하는 분들은 꼭 주의하세요. 너무 정교해서 속을 수 있습니다. 조금 전 아래와 같은 이메일을 받았습니다. 비밀번호가 유출됐다는 내용이고 변경하라고 합니다. 버튼을 클릭하면 다음과 같은 화면이 나옵니다. 도메인을 보면 hongil.net으로 돼있습니다. 사기죠. 이 회사가 홍일식품인데 사이트가 해킹돼 스팸 메일을 보내고 있으니 조치하라고 전화해뒀습니다. 서비스약관 / 정책 링크를 클릭해봤습니다. 다음 카카오와 똑같습니다. 하지만 도메인은 여전히 다음카카오가 아닙니다. http://hongil.net/_controller/admin/shop/product/changepassword/?nil_profile=mini&nil_src=user&nil=bWFydGlhbjM2&q=aHR0cHM..

박경리체가 폰트로 나왔습니다. 아래 링크에서 다운로드 가능합니다. 바로가기 아래는 웹폰트입니다. 고향,내 길다란 그림자 끝나는 곳 나 언제라도 꿈이 있으면어릴 적 뒹굴며 놀던고향 동산으로 돌아가련다 온 몸에 부드러운 봄 햇살을 받으며푸른 들판과 맞닿은 끝없는 하늘을 올려다보면마음은 어느새 수풀을 지나 다리를 건너 시냇물에 닿아평화스러이 느린 꿈에 취하련만…이미 내게서 멀어져 간 먼 옛날의 이야기인가. 나 언제라도 외로워지면살풋한 사랑이 있는 고향 동네로 돌아가련다.한낮의 따가운 볕을 피해 땀을 식히노라면들꽃의 싱그러운 풋내를 담고 수줍게 섰는 순이 얼굴이,소박한 베옷에 때묻지 않은 꿈이울 너머로 아련히 떠오를 듯도 한데…이제는 엷은 감미로움만 남기고 사라져간먼 옛날의 이야기인가. 나 언젠가 안식을 그려모..

티스토리 스킨 Flat Kit 제작이 완료됐습니다. 글을 많이 다루는 뉴스 블로그에 적합하게 만들었습니다. 쇼핑몰 바로가기 데모 사이트 기타 문의사항은 쇼핑몰 문의사항 게시판을 이용해주세요.https://martian.kr/문의-게시판/ 설치만 하면 바로 최신 글이 나오도록 설정했습니다. 설치 후 나타나는 커버 아이템은 다음과 같습니다. 커버 아이템은 썸네일 리스트 7종과 슬라이더 4종, 사이드바 1종입니다. 썸네일 리스트는 레이아웃에 따라 달라집니다. 괄호을 보면 레이아웃의 모양을 알 수 있습니다. 1/3은 3개의 컬럼중 1개의 컬럼을 사용한다는 의미입니다. 아래의 레이아웃입니다. 2/3은 3개의 컬럼 중 2개의 컬럼을 사용합니다. 아래의 레이아웃입니다. 나머지는 3컬럼 또는 4컬럼을 사용합니다. 이런..

블로그 글 검색 유입에 눈내리는 효과가 많아서 CSS를 이용한 눈내리는 효과를 만드는 방법을 알아보겠습니다. 구글 검색하면 다양한 효과의 눈내리는 효과가 있습니다. 자바스크립트를 이용하면 보다 현실감 있는 효과를 구현할 수 있으나 사이트에 부담이 됩니다. 리소스를 계속 잡아먹기 때문에 속도가 느리게 되죠. 대신 CSS를 이용하면 이러한 리소스 부담이 거의 없습니다. 아래의 코드를 복사해 주의문구를 제외하고 붙여넣기 하면 됩니다. ❄❄❄❄❄❄❄❄❄❄ 붙여넣을 장소는 아래와 같습니다. 태그와 태그 사이입니다. 두배로 많게 하려면 다음의 코드를 사용합니다. ❄❄❄❄❄❄❄❄❄❄❄❄❄❄❄❄❄❄❄❄ 모바일에서 안나오게 하려면 아래의 코드를 바로 위에 추가하세요. @media (max-width: 420px) { ...

새로운 티스토리 스킨을 제작중에 있습니다. 이전의 스킨인 Material Kit이 기업 소개용 블로그에 적합하게 만들었지만 이번의 스킨은 뉴스, 매거진 블로그에 적합하게 제작됩니다. 홈화면의 커버 아이템 레이아웃이 전혀 다르게 됩니다. 홈 화면의 레이아웃을 보면 아래와 같습니다. 사이드바를 홈화면에 기본적으로 노출되도록 했습니다. 블로그 글 화면에서는 이전과 마찬가지로 햄버거 버튼을 클릭하면 좌측에서 나타나는 구조가 될 것입니다.