아임웹 코딩으로 조금 편하게 사용해봅시다.
아임웹은 기본적으로 꽤 훌륭한 서비스를 제공하고 있습니다.
누구나 쉽게 홈페이지, 쇼핑몰을 만들 수 있는 건 큰 장점이라고 생각합니다.
그리고, 추가로 커스터마이징이 필요한 사용자를 위해서 별도의 코드도 적용할 수 가 있습니다.
물론 개발자가 아니라면 코드를 적용한다는 게 쉽지 않은 일입니다.
그래서, 누구나 쉽게 따라할 수 있도록 몇가지 간단한 코드들을 알려드리겠습니다.
필수는 아닙니다만, 부족한 부분을 약간이나마 해결할 수 있을 것 으로 생각합니다.
먼저, 아임웹에 코드를 사용하는 방법을 알아야겠지요?
간단합니다. 디자인 모드에서 코드 위젯을 추가하시면 됩니다.
디자인 요소에 코드 위젯이 있습니다.코드 위젯을 추가하면, 다음과 같이 나타납니다.
추가된 코드 위젯에서 마우스 오른쪽 버튼을 누른 후, 코드 설정을 누르시면 됩니다.
그리고, 필요한 코드를 넣으면 해당 페이지에서 작동을 합니다.
아임웹의 디자인 모드는 기본적으로 PC 화면 입니다.
모바일 화면에서는 PC 위젯을 숨기거나, 모바일 전용 섹션을 추가해서 위젯을 적용할 수 도 있습니다.
하지만, 코드 위젯은 모바일에서 숨겨도 그대로 적용됩니다.
따라서, 굳이 모바일에서만 사용한다고 모바일 전용 섹션으로 만들 필요가 없습니다.
PC 와 모바일에 코드가 서로 다르게 뜨게 하고 싶다면, 코딩으로 처리해야 합니다.
이 방법은 기회되면 추후에 다시 알려드리도록 하겠습니다. 우선은 넘어가겠습니다.
위젯을 추가했으면, 이제 하나하나 설명해보겠습니다.
1. 장바구니 페이지의 계속 쇼핑하기 버튼 변경하기
장바구니 페이지에는 주문하기 버튼 아래에 계속 쇼핑하기 라는 버튼이 위치하고 있습니다.
이 계속 쇼핑하기 버튼은 무조건 쇼핑몰의 첫 화면으로 이동합니다. 버튼 이름은 계속 쇼핑하기 인데, 뭔가 빠져나가는 느낌이 강합니다. 그래서, 이 버튼을 클릭할때 원하는 링크로 갈 수 있도록 변경하겠습니다.
저는 /service 라는 링크로 변경하겠습니다.
그렇다면 장바구니 페이지에 코드 위젯을 추가하고 다음 스크립트를 넣어주시면 됩니다.
<script>
$('a.cart-ctn.ctn._fade_link').attr('href', '/service')
</script>
다른 링크, 예를 들어 /shop 으로 하고 싶으면, 위 스크립트의 /service 부분을 /shop 로 변경해주시면 됩니다. PC 화면의 코드 위젯에서만 넣어줘도 모바일 까지 다 적용됩니다. 이유는 앞에서 설명드렸죠? ^^
2. 모바일 장바구니 페이지 상단 1픽셀 제거하기
왜 이렇게 설정되어 있는지는 모르겠지만, 모바일 장바구니 페이지의 상단에는 1픽셀이 추가되어 2픽셀로 나타납니다.
이 부분입니다.저는 이 1픽셀이 상당히 거슬리더군요. 그래서, 장바구니 페이지에 다음 스타일을 추가했습니다.
<style>
@media (max-width: 767px) {
.shop-tit { border-top: 0px !important; }
}
</style>
767px 은 아임웹에서 모바일을 기준하는 가로 넓이입니다. 따라서, 모바일 페이지로 나왔을때만 스타일이 적용되며, 다음과 같이 나옵니다.
휴~ 이제 좀 깔끔해졌습니다.
계속 쇼핑하기 버튼과 모바일 상단 1픽셀 제거는 장바구니 페이지만 해당됩니다. 따라서, 코드 위젯에 2개 코드를 다 넣으시면 됩니다. 아래와 같이 말이죠~
3. 게시판 단독 게시물 하단 여백 조정하기
아임웹에서 게시물의 내용을 볼때, 단독 게시물로 나오게 하는 설정이 있습니다.
현재 제 사이트에도 적용되어 있는 설정입니다.
단독 게시물로 깔끔하게 나오는건 좋은데, 게시물 하단에 여백이 거의 없다는 단점이 있습니다. 디자인 편집이 가능한 페이지라면, 여백 위젯을 넣으면 되는데 단독 게시물 형태는 편집이 불가합니다.
여백이 없으니 뭔가 답답한 느낌이 강했습니다.따라서, 이 부분을 코딩으로 해결할 수 밖에 없습니다.
별도의 편집이 안되는 페이지라서, 게시판 위젯에서 처리해야 합니다.
게시판 위젯에는 게시물에 코드를 넣는 부분이 있습니다.
상단, 하단 상관없습니다. 저는 상단에 넣었습니다.
<style>
@media (min-width: 769px) {
.board_view {
margin-bottom: 70px !important;
}
}
@media (max-width: 768px) {
.board_view {
margin-bottom: 40px !important;
}
}
</style>
PC 화면에서는 하단에 70px 의 여백을 추가하고, 모바일에서는 40px 의 여백을 추가한다는 스타일입니다.
그럼, 어디 잘 적용이 되는지 확인해볼까요?
잘 적용이 되었네요. 여백이 들어가니 많이 깔끔한 느낌이 들지 않나요?
4. 첨부한 이미지들 사이의 여백 제거하기
아임웹에 이미지를 연속으로 첨부하면, 자동으로 이미지 사이에 여백이 생깁니다.
바로 아래와 같이 나옵니다.
특히 상품 상세페이지에서 이미지를 연속해서 붙였는데, 여백이 생겨서 디자인을 해치는 경우가 있습니다. 코딩으로 이 여백을 제거할 수 있습니다. 다음 코드를 적용하면 됩니다.
<style>
.fr-view img.fr-dib {margin: 0 auto;}
.fr-view img.fr-dii {margin: 0;}
img.fr-dib {margin: 0;}
</style>
상세페이지에서만 적용을 하고 싶다면, 상세페이지에서 코드 위젯을 추가해서 처리하면 됩니다. 하지만, 모든 페이지에서 적용을 하고 싶다면,
환경설정 → SEO(검색엔진최적화) → Body Code 쪽에 넣어주시면 됩니다.
아래와 같은 형태가 되겠네요.
혹, 모든 페이지에서 적용하고 싶은 코드들이 더 있다면 이쪽에 넣으시면 됩니다.
이번 글은 여기까지 입니다.
혹 나중에라도 추가해야겠다는 코드가 있다면 보충하겠습니다.
읽어주셔서 감사합니다.
E-mail : raremore@kakao.com
