︎

cargo.site에 관한 팁


Soohyun Jeong, May 21, 2020





✦ 앞서

cargo.site는 홈페이지를 쉽게 만들 수 있는 구독 기반 플랫폼이다. 디자인이 다양하고 쉽게 멋진 효과를 낼 수 있다. 또한 CSS, HTML, JavaScript, Jquery 등을 이용해서 직접 효과와 디자인을 조작할 수 있다. 내가 운영하고 있는 스튜디오는 몇 년 전부터 cargo를 이용하고 있고, 여러 번의 시행착오를 거치면서 알게 된 팁을 소개하고자 한다. support에 나와있는 기본 사용법은 제외하고, 검색해도 나오지 않는 문제와 해결법 위주이며 따라서 어느 정도 cargo에 익숙한 사람에게 적합한 내용이다.






✦ 익스플로러 디버그

cargo는 인터넷 익스플로러에서 반드시 화면 크기 오류가 나기 때문에(...) 아직 익스플로러를 쓰는 사람을 위해서는 필수적인 단계이다. 해결은 간단하다. CSS Editor에서 content_padding을 검색해서 width를 추가한다.

[data-css-preset] .content_padding {    
width:100%; }


✦ montessori 인덱스에서 태그 정렬하기

cargo는 ‘Thumbnail Index’ 디자인을 다섯 가지나 제공하는데, 그중에서 마지막 montessori 디자인을 이용하면서 태그를 사용한다면 아래 내용도 반드시 추가해야 한다. 보통 태그를 누르면 태그가 같은 게시물끼리 쭉 나열되어야 하는데, montessori 타입에서는 아래 그림처럼 썸네일이 띄엄띄엄 위치하게 된다. 



해결 방식은 역시 CSS Editor에서 “tagName”에 해당 태그를 적고, 태그가 있는 만큼 복사 붙여 넣기 한다.

body[data-page-id="tagName"] .hastitle { position:relative; }


✦ 로고 반전시키기



만약 로고가 위의 사진처럼 검은색이고 / pin으로 상단에 고정되어있으면서 / display:fix 로 아래 컨텐츠와 부딪힌다면, 배경색에 따라 로고가 안 보일 때가 있어 디자인에 제약이 생긴다. 이를 방지하기 위해 가장 좋은 방법은 CSS에서 mix-blend-mode: difference; 를 적용시키는 것이다. 

그런데 로고 자체에는 아무리 적용해도 다른 페이지들에 반응하지 않았다. 이 문제는 정말 오랫동안 골머리를 앓았는데, 해결 방법은 로고 pin 페이지 자체에 블랜드를 적용하는 것이었다(!). 우선 해당 페이지의 pid번호(해당 페이지 admin 패널에 가장 아래쪽에 있다)를 복사한 뒤, code view에서 아래와 같이 적용시킨다(아래에서 PidNumber 부분을 해당 페이지 번호로 바꿔야 한다).

<style>
     [local-style="PidNumber"] {
          mix-blend-mode: difference;
     }
</style> 


︎︎︎적용 예시. 배경 색은 물론, 글자나 이미지 등 모든 색상에 반응한다.


✦ 썸네일 타이틀에 아이콘 넣기

스튜디오에서 진행한 프로젝트가 작년 reddot과 CES에서 상을 받아서 아래와 같이 포트폴리오 페이지에서 눈에 띄게 보여주고 싶었다.



  1. 원하는 아이콘/이미지 파일을 업로드한다. 상세 페이지의 admin 패널에 파일 아이콘을 클릭하면 어떤 파일이든 총 100MB까지 업로드 가능하다.
  2. 해당 게시물의 썸네일 data-id를 찾는다. 개발자 도구에서 thumbnail has_title 을 class로 갖고 있는 div class를 찾으면 된다. Elements에서 data-id로 검색하면 금방 찾을 수 있다.
  3. CSS에서 아래와 같이 붙여 넣기 한다.

<style>
[data-id="###"] .title:after {
    content: url( "image URL" ); /*아이콘 URL*/
    background-size: 20px 20px; /*아이콘 사이즈. 썸네일 타이틀에 맞게 조정*/
    display: inline-block;
    width: 20px; /*아이콘 사이즈*/
    height: 20px; /*아이콘 사이즈*/
    padding-left: 6px; /*타이틀과 간격 조정*/
}
.mobile [data-id="###"] .title:after {
    /*모바일에 맞게 padding 조정*/
    padding-left: 0px;
    padding-top: 5px;
}
</style>


✦ 한글 폰트 추가하기

cargo는 한글 폰트 지원이 안되기 때문에 가능하다면 추가해주는 게 좋다. 나는 가장 무난한 google font인 notoSansKR로, 로딩을 빠르게 하기 위해 두 가지 굵기만 추가했다. CSS에 아래와 같이 서체를 로드한다.
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,700');

그 뒤 CSS에서 [data-predefined-style="true”]를 검색해서 bodycopy, h1, h2, p, small의 font-family에 영어 서체 ‘뒤’에 해당 폰트를 추가해준다.






✦ 마치며

막상 써 놓고 보니 굉장히 간단해 보이지만 한글 폰트 추가를 제외하면 해결하는 데 적게는 몇 시간, 많게는 며칠이나 걸린 문제였다(눈물). cargo는 언뜻 보기에 자유로워 보이지만 아주 간단하더라도 지원이 안 되는 경우가 종종 있다. 그럼에도 홈페이지 빌드 플랫폼 중에서는 최고라고 생각한다. 홈페이지를 간단하고 멋지게 만들고 싶은 사람들, 특히 디자이너들에게 추천한다.