안녕하세요, 프리랜서 PPT 디자이너로 활동하고 있는 bysu 입니다. 저는 프리랜서 시작을 우피와 함께 했어요. 사업의 첫 시작이다 보니 아무래도 홈페이지에 많은 리소스를 쏟기에는 어려웠고, 대안을 찾다가 저에게 친숙한 우피를 선택하게 되었죠.
우피는 이미 많은 기능을 편리하게 사용할 수 있도록 서비스하고 있습니다. 퀄리티가 아주 높은 정식 홈페이지가 필요한 게 아니라면 단연 우피를 추천드려요. 비록 저는 다른 웹 빌더로 이사를 가게 되었지만, 다른 분들께서 우피를 더 멋지게 활용하실 수 있도록 제가 이전에 사용했던 코드를 공유드리고자 합니다.
노파심에 말씀드리지만 저는 개발자가 아닙니다. 전문가분들이 보시기에 코드가 뒤죽박죽일 수 있어요. 구글링으로 얼기설기 코드를 조합해 만들었다는 점 참고해 주시면 감사하겠습니다. 때문에 코드 관련 질문은 받지 못합니다. 저도 이곳에 작성한 코드 외에는 모르거든요 :)
본 가이드에서는 위 샘플 페이지를 함께 제작할 예정입니다. 노션에서는 지원하지 않는 가운데 정렬부터 시작해서 버튼을 만들고, 콜아웃도 커스텀하는 등 총 5개 기능을 함께 구현해 보려고 합니다. 지금부터 안내드리는 내용은 노션 단독으로는 구현이 불가하며 우피 서비스를 결제하여 이용하시는 분들만 가능한 점 참고 부탁드립니다.
또한, 모든 내용은 HTML/CSS 코드를 사용하기 때문에 코딩에 대한 배경지식이 있으신 분들은 더 쉽게 활용하실 수 있습니다. 물론 코딩을 모르는 분들도 사용하실 수 있도록 최대한 설명드릴 거예요. 저도 코딩을 배운 적은 없지만 이렇게 얼기설기 코드를 짜고 있습니다. 겁먹지 마시고 천천히 따라해 보세요. 우피에서도 HTML 사용법을 안내하고 있으니 이 가이드와 함께 참고해 주시면 좋을 것 같습니다.
우피에서 코드는 위와 같이 2개 방법으로 작성할 수 있습니다. 1번처럼 우피 콘솔에서 작성할 수도 있고, 혹은 2번처럼 노션 페이지에 코드 박스를 만들어서 작성할 수도 있어요. 1번 방법으로 코드를 작성하면 우피에 연동한 전체 페이지에 코드가 적용됩니다. 반면, 2번 방법의 경우 코드가 작성된 해당 페이지에만 적용됩니다. 각자 장단점이 있겠죠. 우리는 2번 방법으로 모든 코드를 작성하겠습니다.
위 이미지는 함께 만들 샘플 페이지의 실제 노션 모습입니다. 페이지 구성을 보면 노션 페이지 안에 코드 박스가 여러 개 있죠. 우리가 앞으로 작성할 코드는 크게 2가지로 분류할 수 있습니다.
최상단 코드
페이지 최상단을 보면 제목 밑에 딱 붙어서 길이가 긴 코드 박스가 하나 있습니다. 이 최상단에 있는 코드 박스에는 우리가 선언해 줄 ‘규칙’이 주로 담겨 있습니다.
중간 코드
페이지 하단으로 내려가면 길이가 짧은 코드 박스들이 여러 개 있습니다. 이렇게 페이지 중간에 들어가는 코드 박스는 아까 최상단에서 선언해 주었던 규칙을 ‘여기서 사용할 거야’라고 표시하는 용도입니다.
그러니 2가지 코드가 모두 필요하겠죠. 최상단 코드로 규칙을 만들어주고, 중간 코드로 그 규칙을 여기서 사용한다고 표시해 줘야 하니까요. 규칙은 한 번만 선언하면 되기 때문에 최상단 코드는 페이지당 1개만 존재하게 됩니다. 하지만 중간 코드는 한 페이지에 여러 개일 수 있습니다. 그 규칙을 여러 번 사용할 수도 있으니까요.
추가로 최상단 코드의 경우 ‘규칙’들이 담긴 코드라고 배웠죠. 규칙이 여러 개라면 최상단 코드를 여러 개 만드는 것이 아니라 1개의 코드 박스에 규칙들을 다 넣어주게 됩니다. 그래서 최상단 코드는 페이지당 1개만 존재하고, 그 길이가 긴 편입니다. 앞으로 밑에서 여러 규칙을 배우게 될 텐데 1개의 최상단 코드 박스 안에 코드를 추가하는 형식으로 사용해 주시면 됩니다.
참고로 저는 복잡한 홈페이지를 만든다는 가정하에 이렇게 코드를 2가지로 분류했습니다. 만약 간단한 홈페이지를 만든다면 코드를 이렇게 나누지 않고, 자체적으로 규칙을 선언하고 사용할 수 있는 코드를 만드실 수도 있어요. 반드시 위와 같은 구조로 사용해야 하는 건 아닌 점 참고해 주세요.
최상단 코드와 중간 코드를 작성할 때는 주의해야 할 점이 있습니다. 하나라도 지켜지지 않으면 코드가 작동하지 않습니다. 그러니 주의사항을 꼼꼼히 확인해 주세요. 아래 내용까지 모두 숙지하셨다면 본격적으로 코드를 작성하러 떠나보겠습니다.
최상단 코드 작성 시 주의사항
1.
노션 페이지 제목 밑에 코드 박스가 들어가게 되는데, 이때 페이지 제목과 코드 박스 사이에 공백이 있어서는 안 됩니다. 더 자세한 내용은 우피 페이지에서 영상 부분을 참고해 주세요.
2.
코드 박스의 언어를 ‘HTML’로 설정해야 합니다. 다른 언어로 설정 시 코드가 작동하지 않습니다.
중간 코드 작성 시 주의사항
1.
2.
코드 박스의 언어를 ‘HTML’로 설정해야 합니다. 다른 언어로 설정 시 코드가 작동하지 않습니다.
노션 페이지 상단은 위와 같이 배너 + 아이콘 + 페이지 제목으로 구성됩니다. 우피로 홈페이지를 만들 때 이 3개 중 특정 요소를 없애고 싶을 수 있죠. 저는 특히 제목 부분이 없어야 노션 같은 느낌이 덜 들어서 좋더라구요. 그래서 이번에는 페이지 상단 부분을 없애는 2가지 코드를 알려드리겠습니다.
배너 + 아이콘 + 페이지 제목 삭제
최상단 코드
아이콘 + 페이지 제목 삭제
최상단 코드
첫 번째 코드는 상단에 있는 모든 것을 없애는 코드입니다. 이미 우피에서 알려주고 있는 코드이기도 해요. 하지만 저는 배너는 남기고 싶더라구요. 그래서 두 번째 코드를 만들게 되었습니다. 두 번째 코드를 사용할 경우 아이콘과 페이지 제목만 사라집니다.
둘 중 사용하고 싶은 코드를 고르셨나요? 이 코드들은 최상단 코드에 해당합니다. 중간 코드는 없어요. 따라서 노션 페이지 최상단에 여러분이 고르신 코드 박스를 통째로 복사 붙여넣기 해주시면 됩니다. 수정이 필요한 내용도 없습니다. 최상단 코드 작성 시 주의사항을 다시 한번 기억해 주시면서 넣어주세요.
[ CODE 1 ]을 통해 상단을 없애줬으니 이제 새로운 제목 텍스트를 만들어 보겠습니다. 이미지에서 파란색 네모 안에 있는 텍스트들은 노션에서 기본으로 제공하는 텍스트가 아닙니다. 코드로 만들어준 텍스트들이죠. 그래서 노션에서는 지원하지 않는 가운데 정렬도 할 수 있습니다.
그리고 무엇보다 코드로 만든 이 텍스트들은 ‘반응형’입니다. 즉, 화면의 사이즈에 따라서 글씨 크기가 자동으로 변경됩니다. 노트북, 아이패드, 핸드폰 어떤 기기에서 봐도 최적의 사이즈가 되도록 오래 연구해서 만들었어요. 사실 이 [ CODE 2 ]가 이번 가이드에서 메인이라고 할 수 있습니다.
지금부터 갑자기 코드가 길어질 거예요. 그래도 당황하지 마세요. 여기 적힌 모든 코드를 이해하실 필요는 없습니다. 복사 붙여넣기만 잘 해주시면 돼요. [ CODE 2 ]부터는 앞서 배웠듯이 최상단 코드와 중간 코드로 나뉩니다. 이 두 가지가 모두 있어야 코드가 작동합니다.
‘About bysu’ 텍스트
최상단 코드
중간 코드
‘트렌디한 PPT를 만드는 디자이너 bysu 입니다’ 텍스트
최상단 코드
중간 코드
이제 마케팅에 필수적인 버튼을 만들어 보겠습니다. 이 버튼은 거의 모든 요소를 커스텀해서 자유롭게 사용하실 수 있습니다. 자세한 사용 방법은 [ CODE 2 ]에서 길게 살펴봤으니 이번에는 생략하겠습니다.
커스텀 버튼
최상단 코드
중간 코드
코드에서 수정할 수 있는 부분이 많다는 건 오류가 생길 위험도 높다는 걸 의미합니다. 코드는 굉장히 예민해서 띄어쓰기 하나, 오타 하나에도 전체가 작동하지 않습니다. 그러니 요소 여러 개를 한 번에 다 수정하기보다는 하나씩 수정한 후 정상 작동하는지 확인하는 방식으로 시도하는 것을 추천드립니다.
저는 노션의 기본 콜아웃 컬러인 그레이를 유독 좋아하지 않았어요. 그래서 콜아웃도 신나게 커스텀을 했습니다. 그런데 한 가지 안타까운 점이 있어요. 이번 코드는 제가 만들긴 했지만 정확히 왜 작동하는지는 이해하지 못했습니다. 그래서 자세하게 설명드릴 수는 없지만 활용하는 데는 문제가 없으니 안심하고 사용해 주세요!
커스텀 콜아웃
최상단 코드
중간 코드
노션은 일반 본문 텍스트를 제공하지만 더 작은 크기의 텍스트는 지원하지 않습니다. 그래서 아쉬운 마음에 더 작은 크기를 가진 서브 텍스트도 만들었어요. 서브 텍스트는 페이지 하단에서 회사 정보나 이메일 등을 표기할 때 사용하기 좋습니다.
서브 텍스트
최상단 코드
중간 코드
CODE 1부터 5까지 잘 따라오셨다면 샘플 페이지에 있는 모든 것을 만드실 수 있게 됩니다. 최대한 자세하게 설명드리려고 했지만 여전히 어려운 부분이 있을 수 있어요. 그래서 샘플 페이지 코드를 모두 공개합니다. 위 샘플 페이지 링크에 접속하시면 우측 상단에서 ‘복제’를 하실 수 있어요. 복제를 누르면 여러분의 노션 계정에 페이지가 복사되어 원본 코드를 보실 수 있게 됩니다.
만약 ‘복제’ 버튼이 보이지 않는다면 아래 링크를 인터넷 주소창에 복사 붙여넣기하여 접속해 주세요. 링크를 지금 이 페이지에서 클릭하면 코드가 보이지 않기 때문에 반드시 주소창에 복사 붙여넣기 해주셔야 합니다.
똑같이 따라 했는데 텍스트가 조금 다르게 느껴진다면 그건 폰트가 다르기 때문일 확률이 큽니다. 저는 우피 콘솔에서 폰트를 Pretendard로 변경해 주었어요. 이 외에도 가이드를 따라 하다 보면 분명 궁금한 점이 생기실 거예요. 하지만 저는 개발자가 아니기에 어려운 질문은 받지 못합니다. 제가 남긴 가이드와 원본 코드를 보며 연구해 주시길 바랄게요 :)
본업을 하면서 매일 틈틈이 작성한 문서이기 때문에 부족한 점이 많습니다. 그래도 누군가에게는 도움이 되기를 바라며 열심히 제작했으니 많이 좋아해 주셨으면 하네요. 그리고 가이드를 제작한다는 소식에 선뜻 도와주신 우피 대표님께도 감사의 말씀을 드립니다.
우피가 저의 새 출발을 함께해 주었듯 다른 분들께도 좋은 비즈니스 파트너가 되길 바랍니다. 혹시 제가 더 궁금하시다면 인스타그램으로 놀러 오세요. 우피를 깔끔하게 잘 만든 것처럼 PPT도 정말 잘 만든답니다 :)
