노션 위젯 본격 제작 전 맛보기용 타이머 위젯을 만들자

저번 포스팅에 이어서 개발했슈 1기 활동입니다.
노션 위젯을 본격적으로 제작하기 전에 맛보기용으로 타이머 위젯을 만드는 과제를 받았습니다.
직장 병행하면서도 과제를 부담스럽지 않게 생각할 수 있는 건 모두 클로드 덕분이에요.
제 디지털 월세를 가져가시죠.
아무튼 워크북 기본 프롬프트에 제 취향인 레트로 스타일과 애니메이션 효과를 추가해서 프롬프트를 작성했습니다.

바이브코딩 프롬프트 작성

너는 프론트엔드 개발자야. 노션에서 활용할 수 있는 타이머 위젯을 만들어줘.

- 순수 HTML/CSS/JS만 사용 (외부 라이브러리 X)
- 화면 가운데에 "MM:SS" 형태로 남은 시간이 크게 보이게
- 레트로 게임기(도트/픽셀 폰트, 어두운 배경 + 네온 초록/시안 글자) 느낌의 디자인으로 만들어줘
- 콜론(:)이 1초마다 깜빡이는 애니메이션 추가
- 입력: 분(minute) 숫자 입력 1개
- 버튼: 시작(Start), 일시정지(Pause), 재개(Resume), 초기화(Reset)도 레트로 버튼 스타일(각진 테두리, 눌렀을 때 살짝 눌리는 효과)로
- 시작하면 입력값(분)을 기준으로 카운트다운
- 00:00이 되면 "완료!" 메시지와 함께 화면이 살짝 흔들리는 애니메이션 + 배경색 변화
- 코드에 주석을 추가해서 어떤 코드인지 알 수 있게 작성해줘

완성된 index.html 전체 코드를 출력해줘.

index.html 만들기

index.html이란 브라우저가 바로 읽고 화면을 그려주는 파일입니다. 이 파일 하나에 HTML+CSS+JS가 다 들어있어서 따로 서버 설정 없이도 웹페이지가 뜨는 거죠.

구체적 방법:

1. 컴퓨터에 새 폴더 생성 → 이름은 huchu-timer
2. VS Code에서 그 폴더 열기 (파일 > 폴더 열기)
3. 폴더 안에 새 파일 생성 → 파일명 index.html
4. 2번에서 AI가 준 코드를 복사해서 index.html에 그대로 붙여넣고 저장 (Ctrl+S / Cmd+S)
5. 파일 탐색기에서 index.html을 더블클릭 → 브라우저에서 열림 → 타이머 잘 뜨는지, 시작/일시정지/재개/초기화 버튼 눌러보면서 확인

물론 전 이 방법을 사용하지 않고 클로드로 간단하게 미리보기하면서 제작했습니다.
구체적인 지시를 못하는 모자란 상사이기때문에 클로드가 여러번 일해야 하거든요.
간단한 타이머 위젯이기 때문에 기능 구현에는 어려움이 없었으나 디자인을 여러번 수정해야했습니다.

GitHub 레포지토리 업로드

1. GitHub 로그인 → 우측 상단 + → New repository
2. Repository name: huchu-timer (Public 선택)
3. Create repository 클릭
4. 로컬에 있는 index.html을 업로드하는 방법 두 가지:
   • 간단 방법: 방금 만든 레포지토리 페이지에서 uploading an existing file 클릭 → index.html 드래그 앤 드롭 → Commit changes
   • 터미널 방법 (git 써봤다면):

cd 후추슈크림-timer
git init
git add index.html
git commit -m "타이머 위젯 초안"
git remote add origin [레포지토리 URL]
git push -u origin main

git 분명 써 보기는 했는데 아직도 어려워요. 그냥 드래그 앤 드롭이 최고시다.
깃허브 계정 하나 만들어두니까 IT관련 강의 들을때 아주 요긴하게 여기저기서 사용되는 군요.

깃허브에서 파일 바로 올리기

1. GitHub에서 huchu-timer 리포지토리를 만들고 나면(Create repository 클릭 직후), 여러 가지 영어 코드들이 적힌 초기 설정 화면이 나옵니다.
2. 그 화면 중간쯤에 있는 굵은 글씨의 ‘…or create a new repository on the command line’ 부분 바로 위(또는 아래)를 자세히 보면, 파란색 글씨로 uploading an existing file이라는 링크가 있습니다.
   그걸 클릭하면 됩니다!
   (만약 화면이 달라서 못 찾겠다면, 오른쪽 위에 있는 Add file 버튼을 누르고 Upload files를 선택해도 똑같은 화면으로 가요!)
3. 화면이 바뀌면서 드래그 앤 드롭을 할 수 있는 큰 네모 박스가 나타납니다.
4. 컴퓨터(파일 탐색기)에서 아까 만든 huchu-timer 폴더를 열고, 그 안에 있는 index.html 파일을 마우스로 끌어서 깃허브의 네모 박스 안에 쏙 넣어줍니다.
5. 파일이 업로드된 게 보이면, 화면 맨 아래로 스크롤을 내려서 초록색 Commit changes 버튼을 눌러주면 업로드 끝!

파일이 무사히 올라갔다면, 이제 진짜 노션에 띄우기 위한 GitHub Pages 배달 단계로 넘어가면 됩니다.

배달 보내기 (GitHub Pages)

1. 레포지토리 페이지 → Settings 탭
2. 왼쪽 메뉴에서 Pages 클릭
3. Source: Deploy from a branch 선택
4. Branch: main / 폴더: / (root) 선택 → Save
5. 1~2분 기다리면 상단에 https://[깃허브아이디].github.io/huchu-timer/ 같은 주소가 생성됨
6. 이 주소로 접속해서 타이머가 정상적으로 뜨는지 확인 → 뜨면 배달 성공!

이 단계는 깃허브에 올린 파일(index.html)을 나만의 인터넷 주소를 가진 ‘진짜 웹사이트’로 만들어주는 과정입니다. 어디를 클릭해야 하는지 아주 자세하게 풀어서 설명할게요.

1. Settings(설정) 메뉴 들어가기

• 파일이 잘 올라간 깃허브의 huchu-timer 화면 맨 위쪽을 보면 여러 개의 탭(Code, Issues, Pull requests 등)이 나란히 있습니다.
• 그 탭들 중에서 가장 오른쪽에 있는 톱니바퀴 모양의 Settings 탭을 클릭!

2. Pages 메뉴 찾기

• Settings 화면으로 넘어오면, 왼쪽 화면에 길게 세로 메뉴 목록이 보일 겁니다.
• 스크롤을 살짝 내려서 Pages라는 글자를 찾아 클릭해 줍니다. (보통 ‘Code and automation’ 이라는 카테고리 아래에 있습니다.)

3. 배포 방식 확인하기 (Source)

• 화면 중간쯤에 Build and deployment라는 구역이 있습니다.
• Source라고 적힌 글씨 밑의 선택 칸이 Deploy from a branch로 되어 있는지 확인해 줍니다. (요즘은 대부분 이게 기본으로 선택되어 있습니다.)

4. 브랜치(Branch) 선택하고 저장하기 ★가장 중요★

• Source 바로 아래에 Branch라는 항목이 보일 겁니다.
• 처음에는 None이라는 버튼으로 되어 있을 텐데, 그걸 클릭해서 main을 선택해 줘. (만약 main이 안 보이고 master가 있다면 그걸 선택하면 됩니다.)
• main을 선택하면 그 옆에 있는 폴더 모양은 자동으로 / (root)라고 잡힐 겁니다. 이건 그대로 두세요!
• 선택을 마쳤다면, 바로 오른쪽에 있는 Save 버튼을 꾹 눌러줍니다.

5. 웹사이트 주소 생성 기다리기 (조금 인내심이 필요!)

• Save를 누르고 나면 깃허브가 보이지 않는 곳에서 웹사이트를 만들기 시작합니다. 바로 주소가 뜨지 않으니 당황하지 마세요!
• 한 1~2분 정도 기다렸다가 브라우저의 새로고침(F5) 버튼을 눌러보세요.
• 성공적으로 완료가 되면, Pages 화면 맨 위에 체크 표시와 함께 “Your site is live at https://[본인깃허브아이디].github.io/huchu-timer/“ 라는 메시지가 나타날 겁니다.

6. 완성된 웹사이트 들어가 보기

• 그 파란색 링크 주소를 클릭!
• 브라우저 새 창이 열리면서 아까 만든 레트로 타이머가 짠! 하고 나타나면 성공!

주소가 정상적으로 만들어져서 타이머가 잘 뜨면, 그 주소를 복사해서 마지막 단계인 ‘노션에 붙여넣기’를 하러 가면 됩니다!
그런데 브랜치 이름이 main은 없고 none과 github.io만 있네요? 당황하지 않고 제미나이한테 물어보았습니다.

1. main과 github.io의 차이점은?

• 기술적인 차이점은 0%
• 깃허브에서 브랜치(Branch)는 파일들을 담아두는 ‘보관함의 이름표’ 같은 겁니다.
• 전 세계 개발자들이 보통 기본 보관함 이름을 main(또는 master)이라고 부르기로 약속해서 많이 쓰는 것뿐입니다. 보관함 이름이 main이든, github.io든, apple이든 그 안에 들어있는 index.html 파일만 잘 있으면 웹사이트는 똑같이 정상적으로 만들어집니다.

2. 왜 main이 생성되지 않았을까?

깃허브 웹사이트에서 파일을 직접 업로드(드래그 앤 드롭)할 때, 몇 가지 상황에 따라 기본 이름이 다르게 설정될 수 있습니다.

• 자동 생성: 깃허브 페이지(GitHub Pages) 기능을 염두에 두고 레포지토리를 만들었거나, 깃허브 내부 설정이 꼬여서 main 대신 페이지용 브랜치 이름(예: gh-pages 또는 github.io)을 깃허브가 알아서 기본으로 만들어 버렸을 가능성이 높습니다.
• 타이핑 실수: 파일을 업로드하고 Commit changes를 누를 때, 밑에 브랜치 이름을 적는 칸이 있는데 거기에 실수로 타이핑이 들어갔을 수도 있습니다.

아니 그런데 웹사이트 에러가 뜹니다?
확인해보니 제가 파일 이름을 클로드가 만들어 준 그대로 사용하고 index.html로 고치질 않았어요.

웹사이트를 만들 때 왜 첫 번째 파일의 이름이 반드시 index.html이어야 하는지, 그 이유를 아주 쉽게 설명해 드릴게요.

왜 하필 index.html일까?

이건 전 세계 웹 서버들이 공통으로 따르는 ‘약속(규칙)’ 때문입니다.

우리가 브라우저 주소창에 [https://huchu90.github.io/huchu-timer/](https://huchu90.github.io/huchu-timer/) 까지만 딱 치고 들어갔을 때, 깃허브 서버는 이렇게 생각해요.

“어? 폴더(huchu-timer)까지만 찾아왔고 특정 파일을 달라고 하진 않았네? 그럼 무조건 ‘대표 파일’을 꺼내서 보여줘야겠다!”

이때 서버가 폴더 안에서 가장 먼저 찾도록 지정된 기본 대표 파일(대문 역할)의 이름이 바로 index.html인 거죠. 책으로 치면 ‘표지’나 ‘목차(index)’ 같은 역할!

그런데 지금 깃허브 보관함에는 huchu-timer-v2-flipclock.html이라는 이름의 파일만 있고 index.html이라는 간판을 단 파일이 없으니까, 서버가 “어라? 손님이 왔는데 대문이 없네?” 하고 길을 잃어서 아까 그 404 에러(File not found)를 띄운 겁니다..

그럼 지금 어떻게 해결하면 될까?

해결 방법은 아주 간단해요! 깃허브에서 파일 이름만 바꿔주면 다시 배달이 정상적으로 완료될 겁니다.

1. 지금 보고 있는 깃허브 화면에서 huchu-timer-v2-flipclock.html 파일 이름을 클릭.
2. 파일 내용이 보이는 화면 우측 상단에 보면 연필 모양 아이콘(Edit)이 있습니다. 그걸 클릭!
3. 파일 내용 맨 위에 파일 이름을 수정할 수 있는 칸이 뜰 텐데, 기존 이름을 지우고 index.html이라고 적어줍니다.
4. 우측 상단(또는 맨 아래)에 있는 초록색 Commit changes 버튼을 눌러서 저장.

이제 다시 1~2분 정도 기다렸다가 [https://huchu90.github.io/huchu-timer/](https://huchu90.github.io/huchu-timer/) 로 접속해 보면, 길을 잃지 않고 타이머가 짠! 하고 나타납니다.

노션에 플레이팅

1. 타이머 넣고 싶은 노션 페이지로 이동
2. /embed 입력 → Embed 블록 선택
3. 6번에서 확인한 GitHub Pages 주소를 붙여넣고 Embed link 클릭
4. 블록 크기(가로/세로)를 넉넉하게 조절 — 버튼이 눌리기 편하게!
5. 실제로 시작/일시정지/재개/초기화 눌러보면서 잘 작동하는지 최종 체크