친절한김씨의 공작소

저번 시간에 이어서 상점 탑 로고를 수정하겠습니다. 탑 내비게이션을 최종적으로는 위 이미지처럼 수정하기로 했었습니다. 로고도 변경해야 할 테고, 로고의 위치도 수정해야 할 건데 반응형이기 때문에 저번 시간과 같이 미세하게 다르지만 똑같은 작업을 세 번씩 해야 하기 때문에 끝까지 읽어주시면 좋을 것 같습니다. 스마트 디자인 편집창을 열어 첫 화면을 보면 로고가 보일 것입니다. 마우스 커서를 근처에 가져가면 편집 버튼이 생깁니다. 클릭을 해봅니다. 더보기 로고를 index.html(첫 화면)에서 클릭으로 편하게 오픈 했지만, 사실은 index.html을 감싼 main.html 안에 있습니다. 바꿔 말하면 메인 레이아웃(main.html)이 index.html 의 내용을 감싸고 있습니다. 쉽게 1행의 부분을 ..

이전 포스팅에 이어서 사이트 상단의 메뉴를 최종적으로 하기 이미지의 우측과 같이 변경할 것입니다. 좌측은 기존 디자인입니다. 반응형이기 때문에 PC, 태블릿, 모바일 버전까지 미디어 쿼리가 이미 작성되어있고 각각에 맞는 디자인 수정을 하겠습니다. 또한 [사이드 메뉴 버튼]을 우측으로 옮길 것이기 때문에 버튼을 클릭했을 때 좌측에서 우측으로 나오던 [사이드 메뉴]도 우측에서 좌측으로 나오도록 수정할 것입니다. 상단 메뉴의 우측에는 이미 [검색], [로그인], [관심상품] 아이콘들이 자리 잡고 있습니다. [사이드 메뉴 버튼]을 우측 끝으로 옮기려면 이 아이콘들도 지금 위치보다 우측 기준 더 좌측으로 이동해서 [사이드 메뉴 버튼]의 자리를 만들어 주고, [사이드 메뉴 버튼]을 우측 끝에 위치하도록 수정하겠습니..

진행하기에 앞서 필자는 리터칭 디자이너(포토 에디터)이고 실무를 하며 본업이 아닌 분야에 독학을 하고 있기 때문에 완벽하지 않고 모르는 것도 많은, 아마도 이 글을 검색해서 읽고 있는 여러분보다 모르거나 혹은 비슷한 수준일 것입니다. 부족할 순 있으나 여러분께 조금이라도 도움이 되었으면 하는 마음으로 작성합니다. 혹시나 잘못된 부분은 상냥하게 댓글로 알려주세요. 또 궁금하신 점도 댓글을 남겨주세요. 가능한 부분은 함께 고민해드리겠습니다. 카페24 무료 디자인을 살펴보던 중 꽤 괜찮은 반응형 무료 디자인을 발견했습니다. (22년 01월 기준) 카페24가 PC버전, 모바일 버전, 반응형, 에디봇 모드, 스마트 디자인 등 원래 다양한 무료 디자인을 공개했었으나 이번 무료 디자인은 정말 쇼핑몰에서 보편적으로 사..

카페24 모바일 팝업창은 배경이 투명한 png 이미지를 사용해도 하얀 배경과 회색 테두리, 하단의 회색 닫기 창 바까지 원한 적 없는 디자인이 기본으로 설정되어있습니다. 바로 이렇게 말입니다. 원형 팝업창을 만들고 싶을 뿐인데 이게 뭐라고 png를 등록했는데 배경과 테두리, 닫기창이 보이는 걸까요. 카페24 모바일 버전 스마트 디자인 수정을 통해 위처럼 만들어보겠습니다. 그러기 위해서 우선 구조를 알아봐야겠지요. 위와 같이 회색 테두리의 class는 .ec-multi-popup-inner 입니다. 우리는 저기에서 border값만 없애면 되겠습니다. .ec-multi-popup-inner { border:none!important; }/*팝업 테두리*/ 팝업창의 배경 부분은 class .ec-multi-p..

카페24 모바일 버전의 팝업을 설정한 후 디자인 미리보기를 하면 팝업이 어떠한 형태로 보여지고 있는지 확인이 불가능 합니다. 물론 스마트 폰으로 보면 되겠지만 번거로움을 생각하면 PC로 작업하며 바로바로 확인하는 것이 좋겠지요. PC에서 확인하고 작업이 끝나면 스마트폰에서도 반드시 확인을 하셔야 합니다. 디자인 보관함 리스트에서 디자인 썸네일 이미지를 클릭하면 디자인 미리보기가 가능합니다. 하지만 팝업 설정이 되어 있는데 팝업이 보이질 안네요. 팝업 설정을 한 후 디자인 미리보기로 아무리 새로고침 해봐도 팝업이 보이질 않습니다. 이럴 때에는 주소줄의 주소를 복사하여 새 탭에 붙여넣기합니다. 붙여넣기 했을 때 모바일 버전이니 당연히 이렇게 퍼져보일 것입니다. 여기서 f12를 눌러주세요. f12를 누르면 개..

우리는 할인 행사, 각종 마케팅, 심지어는 휴무 공지까지 눈에 띄는 독특한 팝업으로 소비자들의 시선을 끌기 위해 많은 노력을 하고 있습니다. 그러나 카페24의 팝업 모듈은 깔끔하지 못한 닫기 창을 제공하고 있기 때문에 이를 수정하는 방법을 공유합니다. 배경이 투명한 png 파일을 활용한 팝업창을 제작 했을 때 아무리 닫기 창의 배경색을 조정하고 오른쪽, 왼쪽, 가운데 정렬을 하고 텍스트 컬러를 변경해봐도 분명 여러분은 만족하지 못할 것입니다. 이런 형태일 것이기 때문입니다. 보통 홈페이지의 메인 페이지에 띄우는 팝업창은 최상단의 배너 위에 표현되기 마련인데, 배경을 흰색으로 변경하고 텍스트를 블랙으로 변경해도 계속 보이는 닫기 div. 이 글은 팝업 공지를 만들 수 있다는 가정하에 창닫기 div만 수정,..

오늘은 미각제빵소 시리즈 중 더블스콘을 가져왔습니다. 편의점에 못 보던 빵이 보이는 날은 조금 들뜹니다. 안사고는 못 배기는 거죠. 마침 스콘을 참 좋아하는데 생긴 게 맛있다고 외치고 있었습니다. 오늘도 구입처는 GS25 청담센터점. 내돈내산인데 가격이 칼로리 바란스와 같이 사서 얼마인지 명확하게 모르겠습니다. 찾아보니 2,200원이라고 합니다. 초코 카스테라 롤이랑 같은 가격이네요. 오늘도 삼립 사이트를 뒤졌으나 더블스콘은 아직 사이트에 소개되어있질 않았어요. 오늘도 떨어지는 정보력을 보강하기 위해 영양정보 타이핑 들어갑니다. 영양정보 총 내용량 120g 427 kcal 총 내용량당 1일 영양성분 기준치에 대한 비율 나트륨 470mg 24% 탄수화물 67g 21% 당류 26g 지방 15g 28% 트랜스..

많은 쇼핑몰이 마케팅 정보 수신 동의를 위해 회원정보 수정 이벤트를 진행합니다. 각종 이벤트, 프로모션 등으로 힘들게 모은 회원에게 마케팅 정보를 발송할 수 없다면 아무리 회원수가 많아도 회원이 없는 것과 마찬가지인 결과입니다. 마케팅 정보 수신 동의 이벤트를 진행함으로써 회원들에게 쇼핑몰에 대해 관심을 갖게 하고, 각종 혜택을 주며 활발한 구매가 일어날 수 있습니다. ※마케팅 정보 수신 비동의 회원에게 마케팅 정보를 발송하는 것은 법적으로 분쟁의 소지가 있습니다. 그러므로 마케팅 정보 수신동의 이벤트는 꾸준히 지속적으로 진행하는 것이 쇼핑몰의 마케팅에 유리합니다.회원가입 항목 설정 세팅이 안되어 있을 수도 있으니 이 부분을 반드시 확인하시기 바랍니다. 가입시 필수 항목으로 표시되어있지만 체크하지 않아도..

확장팩, 아이템 팩 필요 없습니다. 미니멀리즘 커튼 아이템을 베이스로 제작하였습니다. 9개의 스와치로 이루어져 있습니다. 2571kb LOD 0 (High) Vertices: 7988/Polygons: 12324 LOD 1 (Medium) Vertices: 7988/Polygons: 12324 Shadow LOD 0 (High) Vertices: 7988/Polygons: 12324 Shadow LOD 1 (Medium) Vertices: 7988/Polygons: 12324 오랜 기간 동안 알파(투명도) 커튼을 만들기 위해 노력을 했었습니다. 개인적으로 바쁘면서 힘들기도 해서 시도는 정말 많이 했었는데 알파 커튼의 삼각 깨짐을 해결하지 못해, 알파가 없는 커튼으로 우선 만들어봤습니다. 커튼 봉이나 고리..

확장팩, 아이템 팩 필요 없습니다. 흘러간 시절 가스등 아이템을 베이스로 제작하였습니다. 열대식물 네온사인 1 221kb LOD 0 (High) Vertices: 10093/Polygons: 10286 LOD 1 (Medium) Vertices: 4035/Polygons: 3962 Shadow LOD 0 (High) Vertices: 16/Polygons: 18 Shadow LOD 1 (Medium) Vertices: 16/Polygons: 18 열대식물 네온사인 2 261kb LOD 0 (High) Vertices: 14746/Polygons: 14606 LOD 1 (Medium) Vertices: 4026/Polygons: 3732 Shadow LOD 0 (High) Vertices: 16/Polyg..