"웹디자인 & 포토샵"
252
-
[비공개] 워드프레스 쇼핑몰 정기결제 사이트 신규 제작사례
최근 우커머스의 정기결제 플러그인을 이용한 사이트 의뢰가 늘어나고 있습니다. 소액의 상품을 정기적으로 구매할 수 있고 더구나 자동으로 결제되므로 구매자와 판매자 상호간에 편리성과 함께 판매자로서는 고정적인 구매자의 확보로 고정적인 수입을 거둘 수 있는 장점이 있기 때문입니다. 소비자에게 정기적으로 필요한 아이템만 잘 선택하면 성공적인 쇼핑몰을 만들 수 있습니다.전에 만든 정기결제 쇼핑몰 사이트의 경우 면도기라는 단일 상품을 판매하는데 품질이 좋으면서도 저렴한 가격에 성공적인 케이스로 볼 수 있습니다.한 종류의 상품에 두 가지 옵션 상품의 간단한 구조라서 나름대로의 코드를 작성해 옵션을 선택할 수 있는 형태였습니다.최근에 새로 만들어 오픈한 정기구매 쇼핑몰입니다. 강아지 간식과 장난감, 필수품을 판매하..추천 -
[비공개] 워드프레스 4.8.1에서 추가된 내용
최근에 워드프레스가 4.8.1로 업데이트 되면서 한가지 기능이 추가됐습니다. 보통 0.0.1 버전의 경우 보안 업데이트만 하는데 이번에는 기능이 추가됐습니다. 추가된 기능은 텍스트 위젯에 관한 것입니다. 번역이 추가됐다는 메일이 와서 성급히 번역을 하면서도 이 기능을 찾아보려고 위젯을 뒤져봐도 없었는데 이번에 프로젝트 작업을 하면서 알게되는군요.위 그림은 워드프레스가 4.8로 업데이트 되기 전에 사용했던 텍스트 위젯입니다. 4.8 버전의 텍스트 위젯은 비주얼 탭과 텍스트 탭으로 나눠져 있습니다.푸터에 텍스트 위젯을 배치하고 HTML 태그가 포함된 코드를 붙여넣었더니 위처럼 메시지가 나옵니다. 코드가 있는 경우 비주얼 탭에 붙여넣지 말고 텍스트 탭에 넣으라는 의미입니다. 비주얼 탭에 넣으면 코드가 깨져나오기 때문입니다.그래서 이..추천 -
[비공개] 워드프레스 4.8.1에서 추가된 내용
최근에 워드프레스가 4.8.1로 업데이트 되면서 한가지 기능이 추가됐습니다. 보통 0.0.1 버전의 경우 보안 업데이트만 하는데 이번에는 기능이 추가됐습니다. 추가된 기능은 텍스트 위젯에 관한 것입니다. 번역이 추가됐다는 메일이 와서 성급히 번역을 하면서도 이 기능을 찾아보려고 위젯을 뒤져봐도 없었는데 이번에 프로젝트 작업을 하면서 알게되는군요.위 그림은 워드프레스가 4.8로 업데이트 되기 전에 사용했던 텍스트 위젯입니다. 4.8 버전의 텍스트 위젯은 비주얼 탭과 텍스트 탭으로 나눠져 있습니다.푸터에 텍스트 위젯을 배치하고 HTML 태그가 포함된 코드를 붙여넣었더니 위처럼 메시지가 나옵니다. 코드가 있는 경우 비주얼 탭에 붙여넣지 말고 텍스트 탭에 넣으라는 의미입니다. 비주얼 탭에 넣으면 코드가 깨져나오기 때문입니다.그래서 이..추천 -
[비공개] 워드프레스 4.8 베타 버전
워드프레스가 4.8 버전부터 달라지는 점이 있습니다. 그동안 워드프레스는 시간 기반개발(Time based deveopment)이라서 4개월 단위로 새로운 버전이 출시됐습니다. 그래서 매년 4월, 8월, 12월에 새 버전이 출시됐습니다. 2017년부터는 포커스 기반개발(Focus based Deveopment)이 됩니다. 시간 기반개발에서는 일정한 기능의 추가를 위해 개발하다가 정해진 기간 내에 플러그인 개발이 안되면 포기하고 준비된 기능만 추가돼 출시되므로 시간에 쫓기는 듯합니다. 포커스 기반에서는 시간을 정하지 않고 목표로한 기능이 완료되면 출시되므로 베타기간과 RC기간도 짧지만 언제 출시될지 예정할 수 없습니다.Release ScheduleDecember7, 2016Trunk is open for business. (Post-4.7)May3, 20174.8 Kickoff meeting.May 10, 2017 (+1w)Last chance to merge feature projects.2017년 5월 13일 토요일 오전 5:00 GMT+9(+2d)Beta 1.From..추천 -
[비공개] 워드프레스 4.8 베타 버전
워드프레스가 4.8 버전부터 달라지는 점이 있습니다. 그동안 워드프레스는 시간 기반개발(Time based deveopment)이라서 4개월 단위로 새로운 버전이 출시됐습니다. 그래서 매년 4월, 8월, 12월에 새 버전이 출시됐습니다. 2017년부터는 포커스 기반개발(Focus based Deveopment)이 됩니다. 시간 기반개발에서는 일정한 기능의 추가를 위해 개발하다가 정해진 기간 내에 플러그인 개발이 안되면 포기하고 준비된 기능만 추가돼 출시되므로 시간에 쫓기는 듯합니다. 포커스 기반에서는 시간을 정하지 않고 목표로한 기능이 완료되면 출시되므로 베타기간과 RC기간도 짧지만 언제 출시될지 예정할 수 없습니다.Release ScheduleDecember7, 2016Trunk is open for business. (Post-4.7)May3, 20174.8 Kickoff meeting.May 10, 2017 (+1w)Last chance to merge feature projects.2017년 5월 13일 토요일 오전 5:00 GMT+9(+2d)Beta 1.From..추천 -
[비공개] 워드프레스 쇼핑몰 정기결제 기능 및 친구추천 기능 제작 사례
최근에 워드프레스 기반 우커머스 쇼핑몰에 정기결제 기능을 추가한 프로젝트를 진행했습니다. 정기결제는 일정 기간동안 매월 결제되는 방식으로 정기적인 고객을 대상으로 하기 때문에 고정적인 고객을 유지할 수 있는 장점이 있습니다. 정기결제에 적합한 상품으로는 매월 또는 매주, 매일 배달되는 상품을 위주로 합니다.정기결제를 워드프레스와 우커머스로 개발하려면 두 가지 옵션이 있습니다. 그중 하나는 가격이비싼 플러그인을 사용하는데 1백만원에 달합니다. 플러그인은 대부분 1년간 사용할 수 있고 매년 갱신해야 합니다.다행히 우커머스 제작사에서 개발한 정기구독 플러그인(WooCommerce Subscriptions)을 사용하면 보다 저렴하게 정기결제를 구현할 수 있습니다. 이 플러그인의 경우 가격이 199달러이고 1년 후에 갱신할 때 50%만 내면 됩니다...추천 -
[비공개] 워드프레스 쇼핑몰 정기결제 기능 및 친구추천 기능 제작 사례
최근에 워드프레스 기반 우커머스 쇼핑몰에 정기결제 기능을 추가한 프로젝트를 진행했습니다. 정기결제는 일정 기간동안 매월 결제되는 방식으로 정기적인 고객을 대상으로 하기 때문에 고정적인 고객을 유지할 수 있는 장점이 있습니다. 정기결제에 적합한 상품으로는 매월 또는 매주, 매일 배달되는 상품을 위주로 합니다.정기결제를 워드프레스와 우커머스로 개발하려면 두 가지 옵션이 있습니다. 그중 하나는 가격이비싼 플러그인을 사용하는데 1백만원에 달합니다. 플러그인은 대부분 1년간 사용할 수 있고 매년 갱신해야 합니다.다행히 우커머스 제작사에서 개발한 정기구독 플러그인(WooCommerce Subscriptions)을 사용하면 보다 저렴하게 정기결제를 구현할 수 있습니다. 이 플러그인의 경우 가격이 199달러이고 1년 후에 갱신할 때 50%만 내면 됩니다...추천 -
[비공개] CSS animation 속성을 이용한 이미지 애니메이션
이전 글에서 transform 속성을 이용한 이미지 애니메이션 효과를 알아보았는데 무한반복을 위해 제이쿼리 코드를 사용했습니다. 이번에는 순수한 CSS만을 이용해 애니메이션 효과를 만드는 방법을 알아보겠습니다. 이번에는 애니메이션이 동작되는 도중 중지할 수도 있습니다. Made with Thimble 이미지를 추가하고 .image-container로 감싸줍니다. 이미지는 상하로 긴 이미지입니다. 스타일을 추가하기 위해 style.css를 연결해줍니다. .image-container { width: 600px; height: 400px; overflow: hidden; border: 1px solid #ddd; border-radius: 7px; position: relative; } .image-container img { max-width: 100%; } 이미지 박스를 만들어주소 이미지에 대해서는 max-width를 이용해 이미지 전체 폭이 나타나도록 합니다. 위와같이 나타납니다. .image-container img { max-width: 100%; position: relative; -webk..추천 -
[비공개] CSS animation 속성을 이용한 이미지 애니메이션
이전 글에서 transform 속성을 이용한 이미지 애니메이션 효과를 알아보았는데 무한반복을 위해 제이쿼리 코드를 사용했습니다. 이번에는 순수한 CSS만을 이용해 애니메이션 효과를 만드는 방법을 알아보겠습니다. 이번에는 애니메이션이 동작되는 도중 중지할 수도 있습니다. Made with Thimble 이미지를 추가하고 .image-container로 감싸줍니다. 이미지는 상하로 긴 이미지입니다. 스타일을 추가하기 위해 style.css를 연결해줍니다. .image-container { width: 600px; height: 400px; overflow: hidden; border: 1px solid #ddd; border-radius: 7px; position: relative; } .image-container img { max-width: 100%; } 이미지 박스를 만들어주소 이미지에 대해서는 max-width를 이용해 이미지 전체 폭이 나타나도록 합니다. 위와같이 나타납니다. .image-container img { max-width: 100%; position: relative; -webk..추천 -
[비공개] CSS 이미지 애니메이션
이미지에 마우스를 올렸을 때 긴 이미지를 상단으로 이동시키는 효과를 CSS3의 transform 속성을 이용해 만들어보겠습니다. 일반적으로 이런 효과는 gif 애니메이션 기능을 이용해 만드는데 그러자면 이미지의 용량도 늘어나고 이미지 품질도 좋지 않습니다. Made with Thimble head 태그에 style.css 파일을 추가하고 body에 이미지를 추가한 다음 .image-container로 감싸줍니다. .image-container { width: 600px; height: 400px; overflow: hidden; border: 1px solid #ddd; border-radius: 7px; position: relative; } style.css에 위처럼 이미지의 폭과 높이를 지정해줍니다. 이미지는 상하로 긴 이미지를 사용하므로 박스로 제한하기 위해 height 속성을 사용했고 이 범위를 벗어나는 것을 보이지 않도록 overflow:hidden을 사용했습니다. .image-container img { max-width: 100%; transition: transform 5s; -moz-tran..추천
1510개
1051505개
717884개
