BD 30일차
노코드 웹사이트 제작의 혁신
안녕하세요! 오늘은 노션과 우피를 활용한 노코드 웹사이트 제작의 혁신에 대해 이야기해볼게요.
우피는 "당신의 평범한 노션이 웹사이트가 됩니다"라는 멋진 슬로건을 가지고 있어요. 이 도구는 노션 페이지를 성능 좋은 웹사이트로 변환하는 데 도움을 줍니다. 노션의 긴 URL이나 느린 로딩 문제를 극복할 수 있도록 지원하고, 폰트 변경, 스크립트 코드 설치, 메신저 추가 등 다양한 기능도 제공해요.
비전공자도 쉽게 웹사이트를 제작하고 관리할 수 있어서, 구글 애널리틱스, 채팅 기능, 댓글 기능 등을 활용해 사용자와의 상호작용을 강화할 수 있답니다. 많은 개인과 기업이 우피를 활용해 포트폴리오, 블로그, 브랜딩 웹사이트, 랜딩 페이지 등 다양한 목적의 웹사이트를 제작하고 있습니다.
노션과 웹플로우 사용법
노션으로 새 페이지를 생성하고 공유 상태로 설정하면 웹사이트로 게시할 수 있어요. 특히 회사 소개 페이지를 만들 때는 제목, 아이콘, 배경 이미지를 추가해서 기본 구성을 하죠.
웹플로우에 가입한 후에는 노션 페이지 링크를 연결해서 웹사이트 에디터인 '콘솔'에 접근할 수 있어요. 콘솔에서는 스타일 지정, 폰트 설정, 공유 버튼, 검색 기능 등 다양한 커스터마이징 옵션을 제공하니까 꼭 한번 활용해보세요.
또한, 페이지 뷰 차트, IP 제외 기능, 커스텀 도메인 연결 같은 고급 기능도 사용 가능하답니다.
노션으로 회사 소개 페이지 만드는 법
노션의 다양한 기능을 활용해서 회사 소개 페이지를 만드는 방법을 알려드릴게요. 페이지 구성 요소로는 커버 이미지, 아이콘, 제목, 이미지, 인용문, 제목 텍스트, 데이터베이스(갤러리), 콜아웃 등을 사용할 수 있어요.
이미지를 삽입할 때는 슬래시(/) 명령어나 플러스 버튼을 활용하고, 크기 조절도 가능하답니다. 제목 텍스트는 샵(#) 개수로 크기를 조절하고, Shift+Enter로 줄바꿈을 할 수 있습니다.
데이터베이스 갤러리를 활용해 회사의 발자취를 시각적으로 표현하고, 콜아웃으로 중요 공지사항을 강조할 수도 있어요.
노션에서 데이터베이스 활용하기
노션의 데이터베이스 블록은 인라인과 전체 페이지 두 가지 형태로 사용할 수 있어요. 용도에 따라 선택하면 됩니다. 캘린더 형식의 데이터베이스를 생성해서 강의 일정을 관리할 수 있는데, 각 항목에 태그, URL, 이메일 등 다양한 속성을 추가할 수 있어요.
데이터베이스는 캘린더, 보드, 표 등 다양한 레이아웃으로 변경 가능해서 데이터를 다른 관점에서 볼 수 있게 해줍니다. 필터 기능을 사용해서 특정 기간의 강의만 표시하거나, 계산 기능을 통해 숫자 데이터를 분석할 수 있어요.
노션과 우피를 연동하면 페이지 내에 버튼을 생성할 수도 있어서 문서의 기능성을 높일 수 있습니다.
노션 페이지 정리 방법
노션 페이지를 구성할 때는 다양한 블록(이미지, 제목, 인용문, 갤러리, 데이터베이스 등)을 활용했어요. 강의 일정 파트를 별도의 하위 페이지로 분리해서 정보를 체계적으로 구조화했답니다.
드래그 앤 드롭 방식으로 강의 일정 관련 블록(캘린더, 보드, 코드 블록)을 새 페이지로 이동시켰고, 메인 페이지에서 강의 일정 페이지로의 링크를 제공하여 사용자 편의성을 높였어요.
노션 페이지 작업을 완료하고, 다음 단계로 웹사이트 적용 및 스타일 지정 실습을 예고했습니다.
이렇게 노션과 우피를 활용한 노코드 웹사이트 제작에 대해 알아보았습니다. 여러분도 따라 해보면서 직접 경험해보세요! 😊
