Why.D 하우스

Notion 위젯 제작용 사이트

Why.D 아바타
Why.D

2025.01.18 – 2025.01.21 3박 4일간 제주도 여행을 가게 됐슴다.

앞으로의 여정을 기록하기 위하여 Notion을 사용하여, 사전 체크리스트 / 경비 / 여행 코스등의 내용을 정리해보려 합니다. 워드프레스를 사용하지 않는 이유는 최대한 제 사이트에 부여된 용량을 아끼기 위해서 입니다.

게시글 작성 중, 해당 여행 출발 일자 (1.18)에 대한 카운터를 달고 싶은데 Notion에는 별도 기능이 없는 것 같아서 비전공자들의 코딩 선생님 Chat GPT님께 노션 내에서 카운터를 만들 수 있는 기능을 물어봤습니다.

아래는 프롬프트와 결과물입니다.

notion이라는 사이트를 알고있어?

ChatGPT의 말:

ChatGPT

네, Notion은 잘 알고 있습니다! 😊

Notion은 메모, 작업 관리, 일정 관리, 데이터베이스, 협업 도구 등을 한곳에서 통합적으로 관리할 수 있는 올인원 워크스페이스 플랫폼입니다. 개인이나 팀이 프로젝트를 관리하고 문서를 작성하며 정보를 체계적으로 정리할 때 유용합니다.

다양한 템플릿과 사용자 정의 기능을 제공하며, 특히 협업 기능이 뛰어나서 팀 단위로 사용하는 경우가 많습니다. 개인적으로는 일기 작성, 스케줄링, 학습 노트 정리에 사용하는 사람도 많아요.

혹시 Notion과 관련해서 도움이 필요한가요? 😊

나의 말:

응 코드 스니펫을 통해 소스 작성을 할 수 있을것 같은데, 2025.01.18일에 대한 D-Day 카운터를 달고 싶어 1. 현재 시간을 기준으로 D-n day 및 시간/분/초 남은 시간을 표기 2. 1초씩 감소할것 3. D-day를 경과할 경우 D+n day 형태로 전환 위 기능을 실행할 수 있는 코드를 작성해줘

ChatGPT의 말:

ChatGPT

아래는 HTML, CSS, JavaScript를 사용하여 위의 요구사항을 충족하는 D-Day 카운터 코드입니다. 이 코드는 Notion의 코드 스니펫으로 쉽게 추가할 수 있습니다.

D Day Counter

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

<!DOCTYPE html>

<htmllang=”en”>

<head>

<metacharset=”UTF-8″>

<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>

<title>D-Day Counter</title>

<style>

body{

font-family:Arial,sans-serif;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

height:100vh;

margin:0;

background-color:#f4f4f4;

}

.counter{

text-align:center;

}

.title{

font-size:2rem;

margin-bottom:1rem;

}

.time{

font-size:1.5rem;

font-weight:bold;

}

</style>

</head>

<body>

<divclass=”counter”>

<divclass=”title”>Countdown to 2025.01.18</div>

<divclass=”time”id=”time”></div>

</div>

<script>

functionupdateCounter(){

consttargetDate=newDate(“2025-01-18T00:00:00”);// 목표 날짜

constnow=newDate();// 현재 시간

constdifference=targetDate-now;

letdayLabel=”D-Day”;

letremainingTime=difference;

if(difference>0){

dayLabel=`D-${Math.ceil(difference/(1000*60*60*24))}`;

}else{

remainingTime=Math.abs(difference);

dayLabel=`D+${Math.ceil(remainingTime/(1000*60*60*24))}`;

}

constdays=Math.floor(remainingTime/(1000*60*60*24));

consthours=Math.floor((remainingTime%(1000*60*60*24))/(1000*60*60));

constminutes=Math.floor((remainingTime%(1000*60*60))/(1000*60));

constseconds=Math.floor((remainingTime%(1000*60))/1000);

document.getElementById(“time”).innerText=`${dayLabel}: ${days}d ${hours}h ${minutes}m ${seconds}s`;

}

updateCounter();

setInterval(updateCounter,1000);// 1초마다 업데이트

</script>

</body>

</html>

위 코드를 HTML 파일로 저장한 뒤 브라우저에서 열면 2025.01.18에 대한 D-Day 카운터를 확인할 수 있습니다.

주요 기능

  1. D-Day 계산: 현재 날짜와 목표 날짜를 비교해 D-n 또는 D+n 형태로 표시합니다.
  2. 남은 시간 표시: 일(day), 시간, 분, 초를 실시간으로 업데이트합니다.
  3. 자동 갱신: setInterval을 사용해 1초마다 남은 시간을 계산하고 화면에 표시합니다.

궁금한 점이나 추가 기능 요청이 있으면 알려주세요! 😊

나의 말:

코드스니펫으로 복사 붙여넣기를 완료했어 실제 실행된 UI를 확인하는 방법은?

ChatGPT의 말:

ChatGPT

Notion의 코드 스니펫 기능은 HTML, CSS, 또는 JavaScript와 같은 코드를 실행하는 대신, 그 내용을 정리된 코드 블록으로 표시합니다. 따라서, 직접 실행되는 UI를 확인하려면 Notion이 아닌 별도의 환경에서 실행해야 합니다.

실행 방법

  1. HTML 파일로 저장
    아래 단계를 따라 코드를 실행해 보세요:
    • 메모장, VS Code, Sublime Text 등 코드 편집기를 열고 작성한 코드를 붙여넣습니다.
    • 파일 이름을 d_day_counter.html로 저장합니다.
  2. 브라우저에서 실행
    • 저장한 파일을 더블 클릭하면 기본 웹 브라우저에서 실행됩니다.
    • 브라우저에서 D-Day 카운터 UI를 확인할 수 있습니다.
  3. 온라인 편집기 사용 (선택 사항)
    설치 없이도 온라인에서 실행할 수 있습니다:
    • CodePen, JSFiddle, Replit 같은 온라인 코딩 플랫폼에 코드를 붙여넣습니다.
    • 즉시 실행 결과를 확인할 수 있습니다.
  4. 로컬 서버에서 실행 (선택 사항)
    파일을 실행했을 때 JavaScript가 제대로 동작하지 않는다면, 간단한 로컬 서버를 열어 실행하면 됩니다:
    • Python을 설치했다면 터미널에서 다음 명령어를 실행:bash코드 복사python -m http.server
    • 그런 다음 브라우저에서 http://localhost:8000으로 접속하세요.

실행해보고 문제가 있거나 다른 도움이 필요하면 알려주세요! 😊

나의 말:

아 에디터 상에서 실행되는 카운터를 만들순없을까?

ChatGPT의 말:

ChatGPT

Notion 자체 에디터 안에서 JavaScript 코드를 실행하여 동작하는 카운터를 구현하는 것은 현재 Notion의 제한으로 인해 직접 실행하기 어렵습니다. 그러나, Notion에서 활용할 수 있는 몇 가지 대안을 소개할게요:

1. Notion에서 내장된 대안을 사용하기

Notion은 직접적인 JavaScript 실행을 지원하지 않지만, 아래 대안을 활용할 수 있습니다:

  • 날짜 기반 계산 템플릿: Notion의 수식 기능(Formula)을 사용하여 특정 날짜까지 남은 날(D-Day)을 계산할 수 있습니다. 하지만 시간, 분, 초 단위까지는 표시하지 못합니다.

2. 외부 위젯 삽입

Notion에서 외부 웹사이트의 위젯을 삽입하는 방식으로 D-Day 카운터를 구현할 수 있습니다:

  • Embed Code 사용: HTML, CSS, JavaScript를 실행 가능한 외부 서비스에서 구현한 뒤 Notion에 삽입합니다.
    • Indify와 같은 서비스에서 D-Day 위젯을 생성하고, Notion에 임베드할 수 있습니다.
    • 생성된 URL을 Notion의 /embed 블록에 붙여넣으면 실행됩니다.

3. Notion과 호환되는 외부 실행 환경

다음과 같은 방법으로 D-Day 카운터를 포함한 웹 애플리케이션을 간단히 생성해 Notion에서 활용할 수 있습니다:

  1. CodePen이나 Replit 사용: 코드를 온라인으로 실행하고 결과 URL을 Notion에 임베드.
    • 예를 들어, CodePen에 D-Day 카운터 코드를 붙여넣습니다.
    • 실행된 결과의 URL을 Notion의 Embed 블록으로 삽입합니다.
  2. 커스텀 제작: GitHub Pages 또는 Netlify를 통해 간단히 호스팅 후 해당 링크를 Embed 블록으로 추가.

제안

만약 Notion에서 직접 구현이 제한된다면, 위에서 설명한 외부 위젯 방식으로 도입해보세요. 직접적인 구현이 필요하면 추가 지원을 요청해주세요! 😊

  1. 위젯 형태로 구성할것 (소스는 view가 되지 않으므로)
  2. 카운터 및 D+Day 카운터

위 기능을 소스로 구현하는 것으론 가능했으나, HTML 형태로 발행하다 보면 결국엔 프론트 단에서 노출되어야 해당 기능이 보여지기 때문에 노션 내에서 직접 임베딩 할 수 있는 기능을 물어봤고 그 중 “indify”를 통해 위젯을 무료로 제작할 수 있었습니다.

Indify 특징

  1. 구독형 요금제임 / 발행인은 무료로 사용할 것이기 때문에 해당 요금제는 검토 하지 않음
  2. 노션에서 URL 형태로 직접 임베딩 가능
  3. 무료 요금제는 최대 6개의 위젯과 3개의 프로젝트까지 제공함 (매우 짬)

간단한 클릭과 날짜 지정, 출력 형식을 지정하여 위젯을 생성하였고 결과물은 아래와 같습니다.

위젯 링크 보기

워드프레스에서도 별도 구현은 되지 않는군요. 혹시나 노션에서 사용할 분들은 “indify” 사이트 방문 하여 비슷한 위젯을 제작할 수 있는지 한번 알아보시기 바랍니다.

Indify – Notion Widgets

더 보기

Tagged in :

, ,
Why.D 아바타
Why.D
은근 하는게 많은 30대 서비스 기획자 (Just married!)

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다