글래스모피즘 디자인

Jaewan ShinJaewan Shin
•August 16, 2025

글래스모피즘 디자인

Type
Post
Parent
Noxionite 기능 소개
Children
Language
ko
Tags
기능
Noxionite
글래스모피즘
다크모드
Hero
Authors
Jaewan Shin
Published
August 16, 2025
Use Original Cover Image
Noxionite는 사이트 모든 곳에서 글래스모피즘 디자인이 적용되었습니다.
 

1. 기본 배경화면

다른 이미지가 없으면 public/default_background.png 를 사용하여 배경을 보여줍니다.
notion image

2. Hero

notion image
홈페이지에 라우팅 되었다면 public/hero-assets/ 의 이미지 또는 비디오를 배경으로 보여줍니다.
site.config.ts 의 heroAssets 을 수정하여 Hero를 바꿀 수 있습니다. 아래 값을 비워두면 Hero가 만들어지지 않습니다.
 
  heroAssets: [
    {
      type: 'video',
      src: '/hero-assets/noxionite-shiny.mov',
      url: 'https://bit.ly/alemem64',
      content: {
        ko: {
          title: 'Noxionite',
          description: 'Notion으로 만드는 가장 아름다운 블로그'
        },
        en: {
          title: 'Noxionite',
          description: 'Your Notion pages, reborn as a stunning blog.'
        }
      }
    },
  ],

2.1. 인스타그램 스토리 느낌의 재생바

heroAssets에 여러 요소를 나열해서 여러개의 미디어를 보이게 할 수 있습니다.

2.2. type (필수)

동영상이라면 ‘video’ 로 두고 이미지라면 ‘image’ 로 둡니다.

2.3. src (필수)

미디어의 파일 경로를 입력합니다. public/ 은 생략하고 hero-assets/ 부터 입력하면 됩니다.
대부분의 확장자를 지원합니다.

2.4. url (선택)

url을 입력해서 오른쪽 아래 ‘자세히 보기’ 버튼으로 라우팅할 수 있습니다.

2.5. content (선택)

locale 별로 나열합니다.

3. Notion 페이지

Notion 페이지의 커버 이미지를 업로드 하여 배경을 바꿀 수 있습니다. 커버 이미지에 따라 SNS에 공유시 나오는 소셜 이미지도 자동으로 생성됩니다. Use Original Cover Image 를 켜면 소셜 이미지 대신 원본 커버 이미지가 나오게 됩니다.
 

4. 다크모드 / 화이트모드

notion image
사용자의 설정 상태를 자동으로 파악하여 모드를 전환시킵니다.
 

5. 반응형 디자인

모바일에서도 모든 기능을 완벽하게 제공합니다.
notion image