분류 전체보기

UX/UI 디자이너라면 읽으면 좋을 책 추천 LIST

인터넷 서칭하면서 읽고 싶은 책들을 메모해두었는데 블로그에도 정리해서 올려본다. 올해 안에 다 읽어볼 수 있을지...ㅎㅎ 훅: 일상을 사로잡는 제품의 비밀 전 세계 UX 분야 스테디셀러! 일상을 사로잡고 습관이 되는 제품의 비밀! https://product.kyobobook.co.kr/detail/S000061354159 훅: 일상을 사로잡는 제품의 비밀 | 니르 이얄 - 교보문고 훅: 일상을 사로잡는 제품의 비밀 | 전 세계 UX 분야 스테디셀러! 일상을 사로잡고 습관이 되는 제품의 비밀!‘훅(Hooked)’이란 뭔가를 대단히 즐기고 거기에 빠져 있다는 의미다. 이 의미를 살려 product.kyobobook.co.kr 구글은 어떻게 디자인하는가 모든 사람을 끌어안는 제품을 디자인하라! 숨겨진 차별을..

[카페24] 네이버페이 버튼이 노출되지 않는 경우

네이버페이 승인 받아, 공통인증키 연동도 하였는데 네이버 페이 버튼이 상품페이지와 장바구니에 노출되지 않는 경우 다음의 과정을 체크해보는 것이 좋다. 1) 네이버페이 사용 관련 설정 [카페24 관리자페이지 > 판매채널 > 네이버 > 네이버페이 설정]에 접속하여 노출함/사용함에 체크가 되어있는지 다시 한번 확인한다. 네이버페이 구매 버튼 노출 : 노출함 주문연동 : 사용함 2) 분류별 설정 [상품 > 분류관리 > 상품 분류 관리]에 접속하여 분류별로 가장 하단의 네이버페이 서비스 '사용함'으로 되어있는지 확인한다. 사용안함으로 되어있다면 것은 모두 사용함으로 변경해주고, 하위 분류 동시 적용에 체크하면 하위 카테고리까지 모두 적용된다. 3) 상품별 설정 위의 과정까지는 보통 디폴트 값으로 '사용함'으로 되..

[카페24 오류] 비밀번호 변경/재설정 페이지가 계속 뜨는 경우

쇼핑몰에서 비밀번호 찾기 후, 비밀번호 재설정을 했는데 반영이 되지 않고 계속해서 로그인할 때마다 비밀번호 재설정 페이지가 뜨는 오류가 발생하였는데, 원래 코드로 다시 넣어도 동일한 현상이 반복되었다. 알고보니 layout.html 파일을 수정하면서 핵심 코드가 빠져있었던 것이였다. layout/basic/layout.html 파일에서 태그 다음에 아래 두줄이 들어가 있는지 확인하고, 없으면 추가해주어야한다. 스킨 편집할 때 핵심 코드 빠지지 않게 주의★

[클래스101 강의] 트렌드코리아 2023, 김난도 교수

트렌드코리아는 한 해의 트랜드를 미리 공부하기 위해 종종 책으로 접했는데, 클래스 101에서 강의로 나오게 되어 보게 되었다. 강의로 보니 이야기 듣듯이 편하게 볼 수 있어서 휘리릭 보기 좋았다. 강의 들으면서 기억해두기 위해 적은 것들 정리해 본다. 서울대 소비트렌트 분석센터의 2023 전망, 트렌트코리아 2023 더 높은 도약을 준비하는 검은 토끼의 해 2023 Trend Keyword 'RABBIT JUMP' [R]edistribution of the Average : 평균실종 정규분포가 아닌 집단이 많아져 평균이 의미가 없어짐. 1) 양극화 : 어정쩡한 소비를 하지 않고, 고가품과 초가성비 상품이 동시에 인기 2) 다극화, N극화 : 사람마다 취향이 다양화됨. 고객 한사람 한사람을 위한 제품이 생..

tip
[영카트] 주문상태 '배송' 7일 뒤 자동으로 '완료' 처리하기

영카트에 기본적으로 배송 완료 후, 포인트를 n일 후 지급하는 기능은 있는데, '배송' 상태 n일 후 자동으로 주문상태를 '완료' 처리되는 기능은 따로 없는 것 같아 배송 처리 후, 7일 뒤에 자동으로 주문상태를 '완료'로 변경하도록 하는 코드를 추가하였다. 관리자가 자주 방문하는 페이지 상단에 추가하면 된다. 나의 경우에는 자주 들어가는 adm/index.php 파일 상단에 추가해두었다. 배송처리후 7일 뒤가 아닌 다른 일수를 넣고 싶으면 86400 * 7 부분의 숫자 7을 변경하면 된다. $beforedays = date("Y-m-d H:i:s", ( time() - (86400 * 7))); // 86400초는 하루 $sql2 = " select * from {$g5['g5_shop_order_ta..

absoulte인 div 가운데 정렬하는 여러가지 방법

HTML 컨텐츠 예전 같으면 하나의 div를 position:absolute로 가운데 정렬하려면 아래와 같이 div의 절대 크기를 지정한 뒤 (width:900px), margin-left를 사용하여 박스 크기의 절반만큼 빼주는 방식을 사용하였다. 이게 가장 정확한 방법이긴 한데, 반응형으로 작업하다보니 일일히 박스 크기를 지정하는게 여간 수고스러운 일이 아니다. .contents { position: absolute; left: 50%; width: 900px; margin-left: -450px; } 절대적인 크기를 따로 지정하지 않고도 자동으로 가운데 정렬하는 방법은 아래와 같다. 가로로 가운데 정렬하기 방법1) .content { position: absolute; left: 0; right: 0..

[카페24] 상품 목록 품절 아이콘 대신 텍스트로 표기하기

상품이 품절되면 상품 목록에 보통 이런 품절 아이콘이 뜨는데, 이런 아이콘 말고 그냥 텍스트를 보여주고 싶은 경우 수정하는 방법이다. 텍스트로 보여주면 홈페이지 디자인에 맞추어 폰트를 동일한 스타일로 지정할 수 있고, 혹시나 홈페이지가 반응형인 경우 깨져보이지 않는다는 장점이 있다. 참고로, 단순히 아이콘을 다른 아이콘으로 변경하고 싶은 경우에는 카페24 관리자페이지에서 쇼핑몰설정 > 사이트설정 > 아이콘설정에 접속해서 이미지를 교체하면 된다. 품절대신 Out of stock이나 Sold Out 등 텍스트로 표현하고 싶은 경우 아래와 같이 코드를 추가해주면 된다. 상품분류(product/list.html) 파일에서 상품목록 와사이에 원하는 위치에 {$soldout_icon}를 추가한다. 품절 텍스트의 위..

[php] 에러메시지 나타내기 / php 오류 찾기

php 코드작업을 하다가 제대로 작동안할 때, 일부러 에러메세지를 출력하여 어디서 오류가 났는지 확인 할 수가 있다. 아래 코드를 파일 안에 넣어준다. 그러면 아래처럼 코드를 추가한 페이지에 에러메세지가 뜨게 된다. 이 에러메세지를 확인한 후, 알맞게 코드를 수정하면 된다. 아래 메세지의 경우에는 변수들이 제대로 정확히 정의되지 않아서 발생한 에러이다. 반대로 에러메세지가 뜨는 경우, 뜨지 않게 하려면 아래 코드를 추가하면 된다.

[jQuery] 모바일/PC 디바이스 구분하여 스크립트 다르게 보여주기

디바이스 화면 크기에 따라 스크립트를 다르게 적용(반응형)하는 방법은 아래 글 참고! (화면 크기만으로 구분하므로, PC이더라도 화면 크기가 작아지면 모바일 버전으로 나오게 된다.) https://hongpage.kr/20 [jQuery] 디바이스 크기별로 jquery 스크립트 다르게 불러오기 (반응형) 홈페이지가 반응형인 경우, 디바이스 크기별 jQuery 스크립트를 다르게 불러와야하는 경우가 종종있다. 같은 슬라이더를 쓰더라도 PC버전과 Mobile 버전의 속성을 다르게 할 수도 있는데 아래와 같 hongpage.kr 아래의 방법은 디바이스 크기가 아니라 디바이스 기종에 따라서 모바일과 모바일이 아닌 경우를 구분하는 제이쿼리 스크립트이다. 따라서 PC에서 화면을 작게한다해도 모바일 스크립트가 적용되지..

[php] Warning: Illegal string offset 'file' 오류수정

파일을 수정한 적도 없는데, 어느 날 갑자기 게시판 글 수정 페이지에서 파일 에러 문구가 떴다. Warning: Illegal string offset 'file' in /web/home/xxx/html/skin/board/basic/write.skin.php on line 156 Warning: Illegal string offset 'source' in /web/home/xxx/html/skin/board/basic/write.skin.php on line 157 Warning: Illegal string offset 'size' in /web/home/mymoodae/html/skin/board/basic/write.skin.php on line 157 글 신규 등록시에는 뜨지 않는 에러인데, 첨부..

[php] PHPExcel 엑셀로 데이터 다운받기

1. PHPExcel 다운받기 PHPExcel은 데이터를 엑셀로 다운받을 수 있게 해주는 라이브러리이다. https://github.com/PHPOffice/PHPExcel 홈페이지에서 다운받거나 아래 파일을 다운 받는다. 2. 다운로드 파일 코드 별도의 php파일을 만든 후, 파일 상단에 include_once('/PHPExcel.php');를 넣어 PHPExcel.php을 불러온다. include_once('/PHPExcel.php'); 그 다음으로 SQL문 등 데이터를 가져오는 구문들을 넣어주고 $rows[] = array(1열데이터,2열데이터, 3열데이터, 4열데이터, 5열데이터); 이런식으로 array()안에 데이터를 콤마로 구분하여 넣어준다. 나는 세개의 시트로 나누어서 다운받게 할 예정이라 ..

tip
.pem 파일 <-> .ppk파일 키파일 확장자 변환하기

ppk vs. pem 이란? ppk 파일은 PuTTY Private Key file의 약자로 PuTTY 프로그램에서 사용하기 위한 키파일 확장자이고, pem은 Privacy Enhanced Mail의 약어로 Base64의 인코딩으로 이루어진 인증서 파일이다. 아마존 클라우드 서비스에서 프라이빗 키파일을 .pem 파일로 다운받아 사용하게 되는데 윈도우에서 FTP을 접속하거나, PuTTY 를 이용하려면 .ppk 형식의 확장자로 파일이 필요하다. 또는 .ppk 형태로 키파일을 관리하다가 맥북에서 FTP접속할 때는 .pem파일로 필요하게 되는 경우가 있다. 이 경우 상황에 맞추어 .pem .ppk 변환과정이 필요한데 방법은 아래와 같다. [공통] Puttygen 설치하기 컴퓨터에 Puttygen이 설치되어있지 ..

Swiper 슬라이더 익스플로러에서 작동 안될 때 해결 방법

다양한 옵션과 효과를 제공하여 홈페이지에서 많이 사용하고 있는 Swiper 슬라이더. 작업을 다 하고 브라우저별로 확인하는데 익스플로러에서는 Swiper 작동이 안되는 불상사가. 여기저기 헤매던 중 해결 방법을 찾게 되었다. 바로 Swiper버전을 낮추는 것! https://cdnjs.com/libraries/Swiper/ Swiper - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers Most modern mobile touch slider and framework with hardware accelerated transitions - Simple. Fast. Reliable. Cont..

tip
pdf 홈페이지에 임베드 하는 방법 / PDF 미리보기 기능

와 같은 방식으로 PDF를 링크를 걸면 디바이스에 따라 간혹 바로 보여지기도하고, 다운 받아지기도하는데 웹사이트에서 PDF 를 다운받지 않고 무조건 바로 볼수 있도록 (미리보기처럼) 하는 방법을 정리해보려고 한다. 첫번째 방법 : 사이에 넣어주면 된다. 두번째 방법 : embed 태그를 사용해 pdf를 임베드하는 방식이다.가장 직관적인 방법이라 할 수 있겠다. embed 경로를 pdf 경로로 넣고, type="application/pdf"를 넣어준다. 위의 두 방법은 간혹 익스플로러에서 제대로 작동하지 않을때가 있다. 따라서 세번째 방식이 가장 적합한 것 같다. 세번째 방법 : 구글 드라이브를 활용한 마치 구글드라이브에 업로드 하여 보여주는 듯한 효과로 브라우져에 상관없이 잘 작동한다. 경로를 https..

jquery | .not() 특정 선택자만 제외하기

.not() jquery 선택자 중에 특정 요소(특정 클래스, 특정 아이디)만 제외하고 싶은 경우 아래와 같이 사용하면 된다. .not(selector) 사용 예시 1) 클래스명이 link인 것만 제외한 a 태그 $('a').not('.link').css(); 2) 링크 주소가 #인 것만 제외한 a태그 $('a').not('[href^=#]').css(); 3) 클래스명이 content 가 아닌 #section $('#section').not('.content').css(); .not() 여러개 지정하기 아래와 같이 두가지 방법으로 사용 가능하다. [방법1] 선택자(여기서는 a태그) 밖에 .not()을 사용하여 '제외할 선택자1, 제외할선택자2' 로 표기한다. ※ 주의 ※ 작은 따옴표 안에 제외할 선택자..