스페이스차일드

[WMM] 2027 런던 마라톤 Ballot 오픈되었어요~! (접수방법!)

SPACECHILD — Sun, 26 Apr 2026 17:43:32 +0900

2027년 런던 마라톤 추첨 접수가 오픈되었습니다!

올해 2026년 3월 도쿄 마라톤 완주를 시작으로...

세계 6대 마라톤(World Marathon Major) 1 star

나야 나. World Marathon Major 1-star

하나 했으면 나머지도 다 해야 하기에 ㅎㅎㅎ

일단 접수!

대회 개요

ㅇ 대회일 : 2027년 4월 25일(일) - 추진중인 것 처럼 양일 개최 되면, 24일, 25일)

ㅇ 대회접수 기간 : 접수는 5월 1일(금) 16시(BST)까지!

* BST : British Summer Time

* 한국이 8시간 빠르니까, 아마도 5월 1일(금) 밤 12시까지 접수가 가능할 것 같네요

소문대로, 올해는 토요일도 뛰고, 일요일도 뛰고, 대회 양일 개최를 논의중인데,

2026년 4월 26일 오늘 현재, 아직 결정은 안 났습니다.

만약 정말로 토요일, 일요일 양일 개최를 한다면,

그래도 확률이 조금은 높아지겠죠? ㅎㅎ

ㅇ 대회코스 : 템즈강을 끼고 도는 코스입니다.

참가비용

자국민은 79.99파운드 (16만원)

해외 참가자는 225파운드 (45만원)

초간단 접수방법

1. 런던마라톤 접수 페이지로 이동!

* 공식 홈페이지에서 접수 버튼을 눌러도, 아래 Let's Do This 페이지로 이동하니까 당황하지 말자.

ㅇ 접수페이지

https://www.letsdothis.com/gb/o/29443/checkout/category?eventId=244745&occurrenceId=21111169532&BMdTyQJhYC=true&preferred=true&utm_organiser_id=29443

Let's Do This — Waiting Room

Estimated time: 1 minute You’ll automatically be taken to the registration screen when you are first in line.

www.letsdothis.com

2. International Resident 로 들어가서~

3. International Ballot Entry 의 'Apply'를 누르면 본격 접수 시작!!

* 참고로, UK Resident 로 들어가야지만, 공식 홈페이지에 적혀 있는, "Double Your Chance Entry"가 되는 것 같다.

4. 영어이름, 연락처, 영문주소 입력하면 끝!!

* 영문주소는 나라 먼저 치면, 상세 주소입력창이 다시 생기니까,

구글 자동완성 기능으로 주소 채운 사람들은 나중에 안넘어간다 참고하자

* 참고로 만 18세 이상이어야만 참가 가능하다!

대회 당일 만 18세까지 오케이다.

* 만 18세 미만은 mini 런던 마라톤이 있으니 참고하자.

* 후원할 기관을 선택하면 나중에 메일로 소식을 받아 볼 수 있다.

* 중간에 리스본 마라톤도 함께 담겠냐고 물어보는데, 나는 패스 했다.

* 하단에 각종 체크 박스가 있는데, 다 체크하면 된다.

그 중에는 WWM 가입연동 하겠느냐, 유럽 마라톤 클래식 가입 연동하겠느냐, 이런 게 있는데,

어차피 이렇게 WWM 나갈 정도 분이라면 가입해두면 좋을 듯?

5. 최종제출하면 끝!!

어차피 당첨되고 나서 결제하는 것이기 때문에, 지금은 접수만 잘 하면 된다.

* 당첨 확률이 가뜩이나 낮기로 유명한 대회이기 때문에, 그냥 밀어넣고 봐야 한다

6. 접수 완료!!

자~ 한번에 도쿄 마라톤 당첨된 것과 같은 기적이 이번에도 따라 줄 것인가!!

나는 2027년 4월 25일 런던에 있을 것이다.

7. 당첨자 발표일 : 2026년 7월 초 정도에 이메일로 연락!

될지어다.

될지어다!!!

정말 그놈의 mi 되게 좋아하네!!

* 참고 : 런던 마라톤의 파트너사들 - 뉴발란스가 들어가 있네요.

순토 다이브컴 D6i 배터리 자가교체 해봤습니다. 엄청 쉬운데?

SPACECHILD — Fri, 24 Apr 2026 20:37:55 +0900

보홀 Go2Dive!!

안녕하세요. 스페이스차일드입니다.

스쿠버다이빙을 자주 못 하다 보니, 다이빙을 한번 하러 갈 때면 어김 없이 다이브 컴퓨터 배터리 방전이 되어 있네요.

벌써 순토 D6i를 산지도 10년이 훌쩍 넘어버린 것 같은데...

출국하기 전에 맡기기엔 시간도 부족하고 해서 제가 직접 교체를 해 봤습니다.

다이브 컴퓨터 뒷면을 열어줄 + 드라이버
리튬 CR2450 배터리
실리콘 구리스

(! 주의) 실리콘 구리스는 100% 실리콘 성분 제품만!

집에 ifix64가 있어서 여는 건 딱히 어렵지 않았습니다.

다만 제가 예전에 산 ifix 64에는 희안하게 '+' 드라이버가 없어요~

이것저것 많이 들어 있어서 물건 분해할 때 참 좋긴 한데...

https://spacechild.net/271

[공구] 아이폰, 맥북 수리용 추천 공구! IFIXIT 64 BIT Driver Kit

제 맥북 프로 레티나는 Early 2013 모델입니다. 아직도 쌩쌩하게 잘 돌아갑니다만, 부트캠프를 이용할 때나, 대용량 다운로드를 받을 때에 팬소리가 많이 들리더군요. 구입 이후에 팬 청소를 한번

spacechild.net

해외직구로 5만원대에 구입했었네요.

쿠팡에 검색해보니 거의 8.7만원에 팔고 있네요?;;

이 제품 아니어도 작은 십자 드라이버만 있으면 열 수 있습니다.

배터리는 리튬 CR2450이네요.

BMW320 스마트키에 들어가는 배터리와 같은 규격입니다.

편의점에는 잘 없더라구요? 이마트, 홈플러스 등 대형마트 가면 구할 수 있습니다.

리튬 배터리 CR2450 이 필요하다고 말씀드렸는데,

듀라셀 DL2450 로 교체를 했죠?

똑같은 제품인데, 듀라셀 제품이 자기들 제품에 DL을 붙여요

CR2450이 국제 표준 명칭이라고 합니다.

파나소닉, 소니 등 대부분 제조사들은 이 이름을 사용한다고 하네요?

참고로 2450에서 24는 24mm 지름을 이야기하는 거고, 50은 배터리 두께가 5mm 라는 뜻입니다. : )

출국하기 전에 실리콘 구리스 구하기가 힘들것 같아서

고민하다가 그냥 뚜껑을 닫았습니다. ㅋㅋㅋㅋㅋㅋ

구리스가 다 말라붙어 있어서,

고무로 된 오링 교체까지는 못하더라도 오링을 깨끗하게 씻고 구리스를 새로 도포해주고 싶었는데,

그러지 못했네요.

배터리 교환하고, 잘 되는지 체크!

이렇게 간단! 하게 교체해서 스쿠버 아주 잘 갔다 왔습니다.

멀쩡하네요!

그 동안 왜 배터리 교체를 비싼 돈을 주고 맡겼을까...

역시 할 줄 알면 인생이 편해집니다.

다음에는 오링도 함께 교체해줄게....!!

[CodexBar] AI 사용량 체크해주는 메뉴바(CodeX, 클로드 코드, 제미나이)

SPACECHILD — Fri, 24 Apr 2026 20:25:28 +0900

안녕하세요. 스페이스차일드입니다.

안티그래비티(Antigravity)를 잘 쓰고 있는데,

안티그래비티에서 제공하는 AI툴의 사용량과 리셋되는 시점이 궁금하더군요.

찾아보니, 역시 능력자님이 만들어 놓은 툴이 있었습니다.

CodeXBar

https://codexbar.app/

CodexBar

Tiny macOS menu bar app that keeps your Codex, Claude Code, Cursor, Gemini, Antigravity, Droid (Factory), Copilot, and z.ai limits visible.

codexbar.app

맥용입니다.

맥 상단의 메뉴바에 추가해서 사용할 수 있고, 홈 브루(homebrew)로 설치가 가능합니다.

brew install --cask steipete/tap/codexbar

홈브루로 설치하고 나서는 별도로 실행을 해줘야 합니다.

최초 실행 모드

안티그래비티를 실행해둔 상태에서 설치를 하면 자동으로 인식을 해서 이렇게 바로 남은 양을 띄워줍니다.

아 벌써 클로드 코드 얼마 안남았어...

다른 서비스도 이용중이라면, 'Settings'에 들어가서 추가해줘야 하니 참고하세요.

5분 간격으로 체크하도록 되어 있는 기본 설정을 그대로 쓰고 있습니다.

누군가에게 도움이 되었으면 좋겠네요.

CotEditor 테마 2가지 - Dracula, Catppuccin

SPACECHILD — Thu, 16 Apr 2026 23:11:44 +0900

안녕하세요. 스페이스차일드입니다.

가볍게 코드를 열어볼 때, CotEditor를 쓰고 있는데요,

기본으로 제공되는 테마들이 영 가독성이 떨어져서, 검색을 해보니,

Dracula, Catppuccin을 추천하네요.

아래 파일들을 다운 받아서, CotEditor에서 import 하시면 됩니다.

< Catppuccin >

catppuccin-mocha.cottheme

0.00MB

catppuccin-macchiato.cottheme

0.00MB

catppuccin-latte.cottheme

0.00MB

catppuccin-frappe.cottheme

0.00MB

(출처) https://github.com/catppuccin/coteditor

< Dracula >

Dracula.cottheme

0.00MB

(출처) https://draculatheme.com/coteditor

다른 것들은 없나 싶어서 검색을 해봤는데,

생각보다 CotEditor를 쓰시는 분이 많이 없는지, 테마는 다양하지 않네요.

일단 저는 Dracula 쓰고 있습니다. : )

깃허브에 사이트 인증을 위한 meta data가 들어가 있어도 괜찮아요?

SPACECHILD — Wed, 15 Apr 2026 21:41:54 +0900

안녕하세요. 스페이스차일드입니다.

웹 서비스를 개발하고 라이브를 시키다 보면, 구글이나 네이버 사이트 인증할 때, 추가하라고 했던 meta data가 들어가 있는 경우가 있습니다.

이 메타 데이터들...

깃허브에 그대로 올려도 괜찮은 걸까?

구글 사이트 등록을 위한 google-site-verification, 네이버 소유확인용 meta tag 같은 값은 원래 사이트의 <head>에 공개적으로 들어가는 방식으로 검증하도록 설계된 것이고,

다른 방문자들도 소스보기를 통해 볼 수 있다는 것을 전제로 깔고 쓰는 값이기 때문에, 깃허브 공개 레포지토리에 들어 있다고 해서 크게 문제 될 것은 없습니다.

다만, 이런 공개되어도 되는 검증용 태그와, 절대 공개하면 안되는 비밀키는 확실하게 구분해서 관리해야 하겠습니다.

[AdSense] 서브도메인 쓸 때, 구글 에드센스 ads.txt 파일 문제 해결법

SPACECHILD — Mon, 6 Apr 2026 20:37:08 +0900

안녕하세요. 스페이스차일드입니다.

얼마 전에 오랫동안 유지하던 spacechild.net 도메인을 티스토리와 연결하던 걸 해제하고, blog.spacechild.net 도메인을 티스토리 블로그와 연결해줬습니다.

'spacechild.net' 도메인을 다른데 쓰려고 비운겁니다.

문제는 이렇게 하고 나니까 구글 에드센스에서 'ads.txt' 문제를 해결해야 한다고 뜹니다.

여담이지만, 티스토리는 구조상의 문제(?)라는 변명으로, ads.txt 문제를 해결해달라는 수 많은 유저들의 요청에도 몇 년동안이나(!!) 제대로 대응하지 않다가, 겨우 대응해준 전례가 있습니다.

저 이미지는 그 당시에 정말 지긋지긋하게 보던 메세진데 오랜만에 또 만나게 되네요.

그리고 구글 에드센스에서 보면 아래 그림처럼 ads.txt 상태가 '찾을 수 없음'으로 되어 있습니다.

'blog.spacechild.net/ads.txt'를 쳐보면 기존에 쓰던 티스토리가 연결이 되어 있어서, 정상적으로 ads.txt가 정상적으로 출력이 됩니다.

하지만, 상위인 'spacechild.net'에 는 아무런 내용이 없고, ads.txt 파일이 없다보니 이렇게 뜨는 문제인 것 같았습니다.

그럼 다시 최상위 도메인에 웹사이트를 만들고 ads.txt 파일을 넣자

그러면 랜딩페이지라도 하나 만들어 주고, ads.txt 파일을 루트 디렉토리에 넣어줘야겠다고 생각했습니다.

후다닥 랜딩페이지 하나 만들어서, 기존과 같은 ads.txt 파일을 프로젝트 안(폴더 / 레포지토리)에 하나 같이 넣어주고, 배포했습니다.

그리고 조금 기다렸더니....

좋았어!

호옥시 똑같은 상황의 누군가에게 도움이 되길

덕분에 없었던 랜딩 페이지가 하나 급조되었지 뭐야.

[한번 띄워봐] 웹 코딩 서버 실행 방법 (총정리)

SPACECHILD — Mon, 6 Apr 2026 20:09:27 +0900

사진: Unsplash 의 Chen

안녕하세요. 스페이스차일드입니다.

요즘 바이브코딩의 폭발적인 성장으로

평소 생각만 하던 웹개발 공부에 뛰어드신 분들이 많을 것 같아서 정리했습니다.

웹 코딩 결과물 보기 - 서버 실행 방법 총정리!

1. VSCode 확장 프로그램 사용

Live Server
Live Preview (마이크로소프트 공식 확장/에디터 내 미리보기 가능)

놀랍게도 Live Server는 마이크로소프트의 공식 확장 프로그램은 아닙니다.

Live Preview가 공식 확장...

'Antigravity'에도 Live Server 가 있습니다.

2. 언어/런타임별 터미널 명령어

VSCode 내 터미널에서도 사용할 수 있습니다.

그냥 터미널로 프로젝트 폴더에 가서 실행할 수도 있고요.

다양하게 있는데, 프레임워크를 안 쓸 때는

저는 아래 터미널 명령어를 자주 쓰는 것 같습니다.

npx serve .
npx live-server --host=0.0.0.0 --port=8080
npx browser-sync start --server --files "**/*" --host 0.0.0.0

Node.js

#가장 빠른 정적 서버
npx serve .
npx http-server .
npx live-server .          # 파일 변경 시 자동 새로고침

# 포트 지정
npx serve . -p 3000
npx http-server . -p 8080

Python

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# 포트 지정
python -m http.server 3000

3. 프레임워크별 개발 서버 여는 법

# React (CRA)
npm start

# Vite (React/Vue/Svelte 등)
npm run dev

# Vue CLI
npm run serve

# Next.js
npm run dev

# Angular
ng serve

# Astro
npm run dev

(중요) 모바일 기기에서 접속할 수 있도록 서버를 여는 법

다른 분들은 어떻게 하는지 모르겠는데,

저는 모바일 기기에서 직접 확인하는 걸 좋아해서,

웹페이지에서 지원하는 모바일기기 화면보기 기능 같은 건 잘 안 쓰는 것 같습니다.

1. PC와 모바일이 같은 Wi-Fi에 연결되어 있을 때

Step 1. 맥의 로컬 IP 확인

macOS는 ifconfig, Windows는 ipconfig 임에 유의

macOS에서도 ipconfig 로 시작하는 명령어가 있는데, 맥os 전용 명령어라고...

# macOS / Linux
ifconfig | grep "inet "
ipconfig getifadd en0


# Windows
ipconfig

Step 2. 0.0.0.0으로 서버 실행(외부접근허용)

Step1에서 알아낸 IP를 치는게 아니라, 0.0.0.0을 쳐야 한다는 점에 유의하자.

# http-server (가장 간단)
npx http-server . -p 8080 --cors

# Python
python -m http.server 8080

# Vite — vite.config.js 수정 or 플래그
npx vite --host

# live-server
npx live-server --host=0.0.0.0 --port=8080

# browser-sync (가장 편함 — QR코드 + 여러기기 동기화)
npx browser-sync start --server --files "**/*" --host 0.0.0.0

Step 3. Step1에서 알아낸 IP로 모바일 브라우저에서 접속

Step1에서 알아낸 IP가 192.168.0.5 라고 할 때, 아래와 같이 모바일 웹브라우저에 입력해서 접속합니다.

http://192.168.0.5:8080

2. 같은 Wi-Fi 연결 없이 외부에서 접근하는 법(터널링)

# ngrok (가장 유명)
npx ngrok http 8080
# → https://abc123.ngrok.io 같은 공개 URL 생성

# cloudflared (Cloudflare 무료)
cloudflared tunnel --url http://localhost:8080

# localtunnel (설치 없이)
npx localtunnel --port 8080

누군가에겐 도움이 되길

아르테미스2가 보내온 지구, "Hello World"

SPACECHILD — Sat, 4 Apr 2026 22:56:12 +0900

안녕하세요. 스페이스차일드입니다.

아르테미스2 미션이 순조롭게 진행 중입니다.

NASA에서 오늘 오늘의 사진(Image of the Day)에 레이드 와이즈먼 사령관(커맨더)이 찍은 지구의 사진을 올렸습니다.

오라이언 우주선의 창에서 찍은 사진으로,

위 아래로 2개의 오로라를 볼 수 있습니다.

아래는 5568 x 3712 해상도의 원본파일입니다.

초고화질 다운 받아 가세요~ : )

art002e000192~orig.jpg

5.89MB

애플 정품 폴리싱 천을 사서 써 봤어요.

SPACECHILD — Sat, 4 Apr 2026 22:44:41 +0900

안녕하세요. 스페이스차일드입니다.

아이와 아내가 아이패드를 쓰고 있는데, 어찌나 더럽게 쓰는지!!

전자제품 소중하게 안 쓰는 사람들 ㅜㅜ

제대로 한번 닦아주자 싶어서, 애플 폴리싱 천을 사봤습니다.

처음 이 제품이 놔왔을 때,

"미친거 아니야? 천 한장에 2.8만원?"

했는데, 요즘 인플레가 너무 심하게 오니까. 가격에 큰 감흥이 없네요...

저는 그냥 쿠팡에서 정품 주문 했습니다.

애플 브랜드샾에서 샀습니다.

호환용 제품은 2장에 8400원하는 제품들도 있네요. 참고하세요.

맥북프로 M2 Max 를 쓰고 있는데요,

상태가 심각한 아이패드를 닦기 전에,

제품 하나라도 제대로 살리자 싶어서 제 맥북프로 액정을 먼저 닦아봅니다.

오 손 때 하나 없는....

깔끔한 액정을 얼마만에 보는 건지.

아이패드도 깔끔하게 닦아줬습니다.

사진은 안찍었지만, 21:9 모니터도 이걸로 한번 닦아 줬습니다.

하나 정도 구매해두고 쓰는 것도 괜찮은 것 같네요~

옵시디언을 선택한 이유 + iCloud 폴더 연동 잘 안될 때 Tip

SPACECHILD — Sat, 4 Apr 2026 19:28:09 +0900

옵시디언을 선택한 이유

안녕하세요. 스페이스차일드입니다.

개발하면서 알게 된 내용들을 어디에다가 좀 정리해볼까 고민을 좀 했습니다.

제가 주로 고민했던 부분은 이런 부분입니다.

1. 정보들을 내가 보여주고 싶은 순서대로 보여주고 싶다

2. 새로 알게 된 내용들을 업데이트해서 조금씩 조금씩 다듬어 가고 싶다.

블로그도 기록보존용으로는 참 좋지만, 이런 욕심이 좀 있어서 옵시디언을 골랐습니다.

노션을 쓰는 것도 조금 고민을 했었습니다.

하지만, 노션은 써 봤으니, 안써본 걸 한 번 써보자. 이런 느낌으로 최종 결정을 하게 되었습니다.

하지만, 오히려 기기간 연동과 업데이트는 노션이 옵시디언보다 좋다는 이야기가 많으니 참고하세요.

저는 일단 옵시디언으로 가보겠습니다.

iCloud에 Vault 만들기

옵시디언에 대해서 알아보니, 싱크가 유료더군요.

노션 같은 경우에는 멀티 기기간 싱크가 자유로워서 조금 의외였습니다.

사실 옵시디언은 로컬에 저장을 하는 게 원래 서비스의 의도라고 하더군요.

그리고 그 저장소 이름이 ' Vault'라고 합니다.

금고라는 뜻이니까, 꽤 맘에 들었습니다.

우리는 맥을 쓰니까, iCloud에 Vault를 만들어 버리면 될 것 같습니다.

근데 여기서 주의 할 점

왜 그런지 모르겠는데,

맥에서 iCloud에 "Obsidian"이라는 폴더를 만들고,

여기를 Valut 폴더라고 지정을 해도,

아이폰에서 도저히 인식이 안되는 겁니다.

MacOS에서 만들고 나니 아이폰에서 인식이 잘 되지 않는다

옵시디언 공식 홈페이지 문서를 살펴봐도,

아래 그림처럼 대표 로고(결정) 마크가 폴더에 생겨야 정상인데,

맥에서 하니까 이렇게 폴더 생성이 잘 안되더군요.

아래 처럼 아이폰 앱에서

vault 위치를 iCloud 로 선택하고 폴더를 생성하고 나면 해결이 됩니다.

폴더경로는 /iCloud Drive/Obsidian/(내가 정한 Vault 이름) 이렇게 됩니다.

가끔씩 ChatGPT, Gemini 같은 애들이 헛소리 삑삑할 때가 있는데, 무시하세요.

아이폰 앱에서 생성하고 나니,

공식 홈페이지에서 말한 것 같이 프로그램 로고가 폴더에 그려진 Vault 가 제대로 생성되었습니다.

이제 다시 MacOS 에서 기존에 있는 폴더를 vault 로 하기를 선택하니,

모든게 잘 돌아가기 시작합니다.

일단 결론은

아이폰에서 만들고, 맥OS에서 연동하기(추천)

혹시 저처럼 iCloud 안에 폴더로 맥과 아이폰 연동이 안 되셨던 분들 참고하세요.

블로그 도메인 주소를 바꿨습니다.

SPACECHILD — Sat, 4 Apr 2026 08:14:56 +0900

안녕하세요. 스페이스차일드입니다.

그 동안 spacechild.net 도메인에 티스토리 블로그를 연결해서 썼었는데요,

spacechild.net 은 다른 용도로 쓸 준비를 하고, 블로그는 blog.spacechild.net 로 연결했습니다.

그 간 블로그 본문에서 썼던 모든 글들의 링크가 spacechild.net/숫자 형식으로 되어 있어서 난감하긴 한데요.

본문 내의 다른 글 링크를 클릭할 경우에 제대로 작동 안하는 경우가 많을 것 같습니다.

본의 아니게 불편을 드려 죄송합니다.

포스팅 자체에 대한 접근은 검색엔진이 알아서 잘 도달하게 해주겠죠? : )

꾸물떡 꾸물떡 다른 일을 준비해보겠습니다.

깃허브가 AI 모델 트레이닝에 내 코드 못 쓰게 하는 법

SPACECHILD — Tue, 31 Mar 2026 00:11:36 +0900

안녕하세요. 스페이스차일드입니다.

깃허브가 AI 모델링을 학습시키는데 공개(public)으로 올린 레포지터리 코드를 AI 학습용 데이터셋으로 활용하겠다고 했습니다.

내 코드가 남의 프로젝트에 마구 쓰인다면 기분이 좋지는 않겠죠.

아래 설정을 해두면 깃허브가 AI 모델 트레이닝에 내 코드를 사용하지 못합니다.

우선 아래 링크로 가서, privacy 항목을 찾아 스크롤 합니다.

https://github.com/settings/copilot/features

그리고 아래 두 항목을 각각 블럭, 디스에이블드 해 주시면 되겠습니다.

ㅇ Suggestions matching public code : Blocked

ㅇ Allow GitHub to use my data for AI model training : Disabled

러닝 페이스 변환 앱을 하나 런칭했습니다! (가민, 페이스, 시속, 트레드밀 속도 변환)

SPACECHILD — Mon, 30 Mar 2026 23:01:03 +0900

안녕하세요. 다다다다 스페이스차일드입니다.

러닝 페이스 앱을 하나 런칭했습니다.

https://pace.spacechild.net/

가민 워치를 쓰다보면, 페이스를 MM:SS/km로 표기해주는데, 트레드밀에서 쓸려면 시속으로 변환을 시켜줘야 합니다.

매일 매일 밖에서 뛰는 사람들은 상관이 없기도 하고, 또 자주 쓰는 트레드밀 속도는 외우기도 합니다.

하지만, 가민에서 아래 사진처럼 여러 개의 페이스가 뜨면, 바로 바로 시속으로 계산하기도 힘이 들죠.

그래서 만들어 봤습니다.

가능은 간단합니다.

페이스를 시속으로 자동 변환
페이스, 시속을 입력하면 자동으로 10K, 하프, 풀 마라톤 예상기록 출력
마라톤 목표 시간을 입력하면, 목표로 해야 하는 페이스와 시속을 출력

라이브 하기 전에, 왠만한 사용자 에러들은 잡아놨습니다.

1시간 60분으로 입력하는 빌런 대응,

시속 30km/h 이상은 사람이 아니고 그레이하운드라고 간주해서, 입력이 안되게 만들어 놨으니 참고하세요.

한번 써보시고, 이상한 점 있으면 말해주세요~

조만간, 원래 만들려고 했던

Warm up - Tempo - Recover 같이

연속되는 페이스를 입력해서

한번에 시속 변화를 보는 화면도 만들어 볼게요 : )

https://pace.spacechild.net/

[Antigravity] 안티그래비티 설치해봤습니다. 새로운 경험이네요.

SPACECHILD — Wed, 25 Mar 2026 00:09:00 +0900

안녕하세요. 스페이스차일드입니다.

바야흐로 대 AI 툴의 시대인 것 같습니다.

자고 일어나면 새로운 툴이 나오네요.

제 취향의 이름을 가진 '안티그래비티(antigravity)'를 설치해봤습니다.

VSCode의 설정들을 불러올 거냐는 질문에 YES를 택했는데, 아직 뭐 특별한 감흥은 없네요.

그런가 보다... 하고 있습니다.

한가지 신기했던 것은

깃허브 연동과 레포지터리 생성을 'Agent'에서 대화형으로 할 수 있다는 점이었습니다.

진짜 AI 비서와 일하는 시대가 온 것 같은 기분이 들었습니다.

이야....

실제로 아래처럼 명령을 하니, 알아서 터미널 명령어를 실행시키네요.

물론 깃허브 로그인과 인증코드는 제가 입력하는 과정이 있었습니다.

처음에 제가 원하는 로컬 위치에 프로젝트가 생성이 안되었는데, 이것도 제가 원하는 경로를 말해주니 알아서 옮겨주네요.

처음에는 /.gemini/antigravity/scratch/ 밑에 프로젝트가 생성이 되어 있었고, 숨김폴더 하위에 있어서 찾기가 어려웠습니다.

직접 폴더를 옮기지 않고, agent와 대화로 옮겨봤네요.

재밌고 신기합니다. : )

2026 도쿄 마라톤 사진 구매하는 법

SPACECHILD — Mon, 2 Mar 2026 20:26:08 +0900

안녕하세요. 스페이스차일드입니다.

2026 도쿄 마라톤 대회 사진이

대회 하루가 지나고 드디어 올라오고 있습니다.

아래 링크에서 생년월일, 배번번호를 입력하면 조회가 가능하고,

오늘부터 조금 더 작업이 되어서 사진이 추가될 거라고 합니다.

https://g.allsports.jp/en/event/events/1709580/pages/1529055

신기하게도 저도 꽤 여러장 찍혀 있고,

단독샷으로도 몇 장 찍혀 있네요.

한 장 당 거의 26달러, 4000엔 수준이고,

자기 배번으로 검색되는 모든 사진을 다운 받는 것은

2.7천엔, 170달러 수준입니다.

다운 받고 싶은 사진 5~6장 정도만 있어도 스페셜 데이터 다운로드 하는 게 더 나을 것 같네요.

저도 지금 구매하지 않아서 정확하진 않지만,

달리기를 했던 주로 사진과 대회장 사진 등이 고퀄리티로 같이 들어가 있는 것 같습니다.

좋은 사진들 많이 건지시길!!!

2026 도쿄 마라톤 기록 조회하는 법

SPACECHILD — Mon, 2 Mar 2026 20:07:43 +0900

안녕하세요. 스페이스차일드입니다.

국내 마라톤은 공식 기록 나오기 전에, 비공식 기록이라도 조회할 수 있는 링크가 날아오는데

도쿄 마라톤은 바로 날라오진 않더라구요?

검색을 해보니, 아래 링크에서 검색할 수 있습니다.

https://runnet.jp/project/tokyo2026/results/

東京マラソン2026

「東京がひとつになる日。」東京マラソン2026の大会公式ウェブサイトです。コースマップ、エントリー情報などご確認いただけます。

www.marathon.tokyo

일본어로 나오는데, 오른쪽 상단에 언어 설정을 한국어나 영어로 바꾸면 됩니다.

중간 탭인 '선수검색'으로 들어가서 배번을 입력해서 검색하는 것이 빠릅니다.

이름은 풀네임으로 정확히 넣어도 비슷한 이름들이 같이 나오니까, 배번이 가장 정확하겠습니다.

일단, 이건 언오피셜(unofficial)한 기록이니까, 정식 기록이 나올 때까지 조금은 기다려봐야 합니다.

그리고 조회 페이지를 한글로 번역하면, '순간' '광택 시간'이라는 이상한 이름으로 기록이 표기될텐데,

'순간'은 내가 실제 스타트에서 피니시까지 걸린 시간 ( = Net Time )

'광택 시간'은 최초 레이스 시작 이후 걸린 시간 ( = Gross Time / 흔히 건타임으로 표시 )을 말합니다.

* 구글의 일어 > 한국어 번역이 매끄럽지 않은거 같네요.

저처럼 궁금해서 헤매던 사람에게 도움이 되기를 ㅎㅎ

VSCode에서는 유료 ChatGPT를 연동해서 쓸 수 있지만, Cursor에서는 안되요.

SPACECHILD — Tue, 14 Oct 2025 01:12:36 +0900

저번에 유료 ChatGPT를 VSCode와 연동하는 법에 대해서 간단히 포스팅 했었습니다.

실제로 이 이후에, 맥용 ChatGPT도 VSCode와 연동해서 잘 쓰고 있고,

VSCode 내에서도 Codex Extension 채팅창으로 재밌게 잘 쓰고 있습니다.

https://spacechild.net/619

[ChatGPT] 유료 ChatGPT과 VSCode를 연동하는 법(CodeX 익스텐션)

안녕하세요. 스페이스차일드입니다. ChatGPT 유료버전을 쓰고 있는데,GitHub Copilot에서 제공하는 ChatGPT 버전은 늘 단독 ChatGPT 버전보다 낮더군요. 오늘은 ChatGPT 단독 앱과 VSCode를 연동하는 방법에 대

spacechild.net

오늘 예전에 누가 Cursor를 추천해준 게 생각나서 깔아봤는데, Cursor는 유료 모델을 따로 구입하지 않으면, 지금 제가 돈을 이미 내고 쓰고 있는 ChatGPT 5와도 연결이 안네요.

VSCode의 Codex 확장은 OpenAI의 계정을 직접 연결하는 중간 브리지 방식입니다.

즉, 내가 내 GPT 구독 계정을 직접 연결하는 구조인데, Cursor는 그게 안됩니다.

즉, Cursor 내에서 ChatGPT를 쓰더라도 그건 저의 ChatGPT 계정과는 별개인 것이죠.

OpenAI Key를 직접 입력해서 쓰는 방법이 있긴 한데, 아직까지는 '굳이?' 이런 생각도 좀 드네요.

혹시 궁금해하실 분들이 계실까봐 짧게 남겨봅니다.

써볼까 말까

v0.app 성능이 정말 굉장하네요. (v0.dev = v0.app)

SPACECHILD — Sat, 11 Oct 2025 21:12:51 +0900

안녕하세요. 스페이스차일드입니다.

어제 늦은 밤 퇴근하고 집에 와서,

v0.dev 사이트에 접속해서 웹페이지 화면을 하나 만들어 봤는데,

성능이 정말 대단하네요.

https://v0.app/

v0 by Vercel

Your collaborative AI assistant to design, iterate, and scale full-stack applications for the web.

v0.app

Vercel 이 만든 서비스라고 하는데,

프론트엔드 페이지를 자동으로 생성해주고,

리액트 코드를 바로 생성해주는 플랫폼입니다.

말 그대로 '딸깍'으로 웹 페이지의 프로토타입을 만들어내는 시대가 왔네요.

아무거나 하나 툭 던져 봤는데,

한 10번 정도의 수정으로 만족스러운 결과물을 만들어내줬습니다.

더 재밌는건, 웹페이지 상의 실제 데이터들도 가져와서 반영을 해준다는 점입니다.

예를 들어 실제 데이터들을 살펴보고 업데이트 해달라고 하면, 바로 해주고,

이미지도 가져와서 다운로드 할 수 있도록 만들어 달라고 하면 바로 구현해줍니다.

그냥 외형 목업 만이 아닌게 너무 신기 했습니다.

웹디자인 + 구조 + 반응형 코드까지 자동으로 생성해주고,

아직 안해봤지만, Next.js 코드로도 변환해준다고 하네요.

(>> 확인해보니, 아직 그런 기능은 없네요.)

하지만, 데이터 수집(크롤링), API 서버, DB관리 등은 별도로 구축해야 합니다.

무엇보다 만든 웹페이지를 바로 깃허브에 올릴 수 있고,

바로 Vercel로 배포까지 해버릴 수 있다는게... 정말 대박이라는 생각이 드네요.

얼마 전에 피그마(Figma)의 자동 완성 웹페이지 기능도 엄청나다고 생각했는데,

이런 연동성(리액트 + Vercel) 때문에 v0.dev를 더 파보고 싶다는 생각이 들었습니다.

공짜로 체험해볼 수 있는 '크레딧'이 1.66 정도 됩니다.

저는 한번에 하나의 명령을 한 건 아니고, 번호를 붙여가면서 여러개의 명령을 내렸는데,

거의 10번 만에 소진이 되었습니다. 참고하세요.

처음에 제공되는 크레딧을 다 쓰고 나서 업그레이드는

Premium, Business, Team, Enterprise 이렇게 준비되어 있습니다.

프리미엄 같은 경우는 한 달 20달러 치의 크레딧을 쓰게 해준다는데,

이 크레딧은 또 토큰 당 결제가 되는 구조라서

처음 쓰는 사람들은 20달러치가 어느 정도 사용해볼 수 있는 양인지 감이 안옵니다.

무료로 제공되는 양이 한 달에 5달러라고 하니,

제가 요청한 10회 정도(다중 명령)를 한번에 다 털었으니,

저는 크게 넉넉할 것 같다는 생각이 안드네요.

아무튼 사용자가 늘어나면 가격구조는 조금 더 내려가지 않을까 생각을 해보면서...

한번 사용해보세요~

이제 정말 새로운 세상이 왔네요.

Buy me a coffee 계정 만드는 법 (수익창출, 개발자 후원 받기)

SPACECHILD — Sat, 11 Oct 2025 13:37:57 +0900

안녕하세요. 스페이스차일드입니다.

앱이나 웹서비스를 출시할 때,

가장 중요하게 생각하는 것은 본인의 만족이나 즐거움, 그리고 수익(보상)이겠죠.

에드센스를 오랫동안 사용한 사람으로서, 때로는 광고보다는

"옛다. 고생했다."는 식으로 Donation을 받는게 더 나을 때도 있다는 생각을 종종했습니다.

그러다가 "Buy Me A Coffee"가 떠올랐습니다.

옛날에 개발자들이 이런거 달아놨을 때, 얼마나 멋있다고 생각했었는지.

언젠가는 나도 저런 거 꼭 한번 가져봐야지 하는 생각을 했던 것 같습니다.

그래서 뭐 아직 붙일 서비스도 없고, 페이지도 없는데 냅다 질러버렸네요.

그동안 뭘 그렇게 미루고 살았던가.

참고로 후원 플랫폼들은 많습니다.

Buy Me a Coffee, Ko-fi, Patreon, Paypal 등등...

https://buymeacoffee.com/

Buy Me a Coffee

Buy Me a Coffee is the best way for creators and artists to accept support and membership from their fans.

buymeacoffee.com

"BUY ME A COFFE" 계정 만드는 법

모르는 누군가에게 커피 한잔을 얻어먹을 수 있는 준비과정은 이렇습니다.

계정만들기 > Stripe 연동하기 > 내 계좌 연결하기

BMAC 계정만들기

계정만들기는 쉽습니다.

내가 앞으로 쓰고 싶은 username을 적고 내 메일로 연동하면 가입 끝.

다음은 Stripe 서비스와 연동하기

Buy Me a Coffee는 결제파트너로 Stripe를 이용합니다.

즉, BMAC는 서비스 이고, 실제 돈을 처리하는 결제 대행사가 Stripe 인 것입니다.

stripte 계정화면에서, 계정으로 쓸 메일을 입력하고 다음으로 넘어갑니다.

우리나라 통장과 연결하기

stripe 계정과 연동이 되었다면, 이제 우리나라 통장과 연결할 차례입니다.

한국을 선택하고 (한국에 살고 있다면),

비즈니스 유형을 선택합니다.

이때 조금 당황하실 수도 있는데,

여기서 말하는 개인/단독사업자 카테고리가

그냥 취미로 개발하거나 사업자를 내지 않은 1인 개발자가 선택할 카테고리입니다.

쿵 : 어? 저는 직장인인데요?

짝 : 개발해서 후원받는거랑 그 일이랑 관계 있어요?

쿵 : 아니요

짝 : 이거 하세요.

이제 지급에 사용할 계좌를 추가하는데,

내가 후원받은 돈을 입금받을 계좌입니다.

참고로 2025년 10월 현재 카카오뱅크는 지원이 안됩니다.

세계 은행들 간에 돈을 주고 받을 때 쓰는

'SWIFT CODE'라는 것이 있긴 있는데, 지원이 안됩니다.

(코인플랫폼들은 이런 SWIFT CODE 라는 틀과 거래일 이라는 개념을 사라지게 만들어 줍니다)

토스도 마찬가지입니다.

Buy me a coffee 수익을 받을 수 없습니다.

저는 기존에 구글 에드센스 수익 받을 때 쓰던 SC제일은행으로 했습니다.

제가 만들었던 초창기에 좋아서 쓴거지, 지금은 더 좋은 은행들이 많을테니, 한번 찾아보세요.

타다~

이제 끝났습니다.

이제 이 링크를 홈페이지에 붙여넣기만 하면 됩니다.

<a href="https://buymeacoffee.com/username" target="_blank">☕ Buy me a coffee</a>

자 이제는 이걸 붙일 뭐라도 만들어봐야... : )

[tailwind] tailwindcss를 쓰면 reset.css는 이미 포함되어 있음(preflight)

SPACECHILD — Thu, 9 Oct 2025 22:30:22 +0900

Next.js + Tailwindcss로 개발할 때

프론트엔드 개발의 시작은 HTML + CSS + JavaSript이고,

웹브라우 저마다 설정된 default 값을 없애고 디자인 통일성을 위해서, reset.css 를 습관적으로 사용합니다.

그래서 next.js + tailwindcss 조합으로 프로젝트를 생성했을 때도

reset.css 파일을 생성해서 불러오거나,

reset.css 파일 내의 초기화 내용을 globals.css 파일에 넣으려는 경우가 있는데, 많은 경우에서 에러가 납니다.

일단 결론부터 이야기 하면

tailwind는 자체 리셋 시스템을 이미 내장하고 있습니다.

Preflight라고 부른다는데,

tailwind를 쓰는 순간 이미 'reset.css'가 적용된 상태가 되는 것이라고...

* 공식 문서 참조

https://tailwindcss.com/docs/preflight

Preflight - Base styles

An opinionated set of base styles for Tailwind projects.

tailwindcss.com

테일윈드를 안 쓸 때는 어떻게 하나요?

reset.css를 어떻게 로딩해야하는지 물어보면,

codex나, chatGPT 등이 다양한 해결책을 제시합합니다.

사람들과 AI가 제일 많이 추천하는 방식은

reset.css 파일과

globals.css 파일을

루트의 layout.tsx 파일에서

reset.css > globals.css 순서로 로딩해 주라는 것.

실제로 이렇게 구현된 예제들도 많이 발견됩니다.

꼭 reset.css로 초기화해주고 싶은 사람은 참고합시다.

저는 프로젝트 생성을 할 때,

TypeScript와 Tailwind를 쓰는 것을 기본으로 설정하기 때문에 별도로 reset.css 는 하지 않기로....

https://spacechild.net/620

[Next.js] Next.js 새 프로젝트 생성하는 법+옵션선택(Step by Step)

사전 준비 사항npm과 Node.js는 당연히 설치가 되어 있다고 가정합니다.나한테 Node.js가 있는지 없는지, npm이 있는지 없는지 모른다면 아래 글 참조https://spacechild.net/607 프로젝트 생성하기 1. 프로젝

spacechild.net

[TMDB] API_KEY를 발급 받았으면 TMDB에 데이터를 요청하고 회신 받아보자(feat.THUNDER CLIENT)

SPACECHILD — Sat, 4 Oct 2025 19:57:28 +0900

지난 포스팅에서, The Movie Database의 API를 발급 받았으니,

이제 발급 받은 API로 TMDB에 요청을 보내고, 또 회신을 받아봅시다.

* TMDB의 API_KEY를 발급받지 않았다면 아래 포스팅을 참고합시다.

https://spacechild.net/625

[TMDB] The Movie Database API Key 발급받는 법(무료, 개발용)

The Movie Database (TMDB) https://www.themoviedb.org/ 'The Movie Database'는 전 세계 영화, TV 프로그램이 정리된 방대한 사이트입니다. 너무나도 감사하게도, 사람들이 고생해서 별도의 DB를 만들지 않고도 본인

spacechild.net

curl의 데이터가 뭐가 있는지 알고 요청할 수도 있고,

뭐가 있는지 모르고 요청할 수도 있는데,

일단 뭐가 있는지도 모르고 요청 한번 해봅시다.

어떤 데이터들이 돌아오는지.

참고로, 우리가 API call(API 호출)을 하면,

TMDB의 데이터는 JSON 형식으로만 회신합니다.

("The only response format we support is JSON)

터미널을 열고,

아래 명령어를 쳐봅시다.

"실제 발급받은 API_KEY" 부분에는 실제 API_KEY를 넣어줍니다.

curl "https://api.themoviedb.org/3/search/movie?api_key=실제 발급받은 API_KEY&query=interstella&language=ko-KR&page=1"

query에 'interstella'를 넣어서, 'interstella'가 들어가는 영화를 검색했습니다.

'옥수수나 키우며 살고 있다....' 라는 내용이 나오는 걸 보니,

제가 아는 인터스텔라 영화가 잘 검색되어 온 것 같습니다.

그런데 아래 내용을 보니, 어지럽습니다.

도대체 뭐가 회신되어 온 건지 제대로 알기가 어렵습니다.

도무지 뭐라고 출력한건지...

이럴 때, JSON을 깔끔하게 가독성 좋게 보여주는 다양한 툴이 있는데,

저는 VSCode에서 쓸 수 있는, "THUNDER CLIENT" 익스텐션을 사용해 봤습니다.

아래는 Thunder Client 설치가 끝난 화면입니다.

화면 상단에 GET 이후에 접근 주소와 API_KEY, query, language 등을 입력해주시면 됩니다.

Query Parameter에 있는 api_key에 직접 문자열을 넣으면, 위 주소줄에 자동으로 입력되는 것을 알 수 있습니다.

예시화면으로 1234를 입력해놨지만, api_key를 제대로 입력해주세요~

오른쪽 화면을 보면

API 호출 결과물이 아까 터미널 처럼 정신 없이 출력되는게 아니라,

가독성 좋게 깔끔하게 JSON이 출력되는 것을 알 수 있습니다.

이제 이 툴을 사용해서,

TMDB의 다양한 api를 호출해봅시다.

호출하는 방식은 아래 TMDB 개발문서를 참고합시다.

https://developer.themoviedb.org/reference/getting-started

Getting Started

Welcome to version 3 of The Movie Database (TMDB) API. This is where you will find the definitive list of currently available methods for our movie, tv, actor and image API.

developer.themoviedb.org

API호출(API call)의 개념과 다양한 API 호출방식(API, Query, API Call, cURL)

SPACECHILD — Sat, 4 Oct 2025 18:32:45 +0900

(이미지 출처) https://fabric.inc/blog/developer/api-call

API Call, API, Query, 그리고 서버

API 호출을 한다는 것은 API에 요청을 보내고, 데이터를 응답받는 일련의 과정을 말합니다.

이를 식당에 비유하면,

API는 식당에서 주문할 수 있는 메뉴판(설명서)입니다.

시킬 수 있고 받을 수 있는 주문이 정의되어 있습니다. 이것이 식당의 규칙입니다.

* API (Application Programming Interface)

쿼리(query)는 이 메뉴판에 있는 음식을 고르는 행위입니다.

API를 보고 그에 맞는 주문(요청)을 하는 것입니다.

여기서 API를 보고 규칙에 맞게 요리(데이터)를 주문(query)하는 것을 통틀어,

API call(API 호출)이라고 부릅니다.

이때, 서버는 주방입니다.

우리가 메뉴를 보고 주문 하면(API call), 서버는 요리(요청한 데이터)를 제공합니다.

API를 호출하는 다양한 방법

api를 호출하는 방법에는 다양한 방법이 있습니다.

웹브라우저에서도 호출할 수 있고,

터미널에서 cURL 명령어로 호출할 수 있고,

프로그래밍 언어의 HTTP 라이브러리를 이용하는 방식이 있습니다.

- JavaScript의 fetch()함수나, python의 request 라이브러리가 대표적입니다.

[TMDB] The Movie Database API Key 발급받는 법(무료, 개발용)

SPACECHILD — Sat, 4 Oct 2025 01:45:23 +0900

https://www.themoviedb.org/

The Movie Database (TMDB)

https://www.themoviedb.org/

'The Movie Database'는 전 세계 영화, TV 프로그램이 정리된 방대한 사이트입니다.

너무나도 감사하게도, 사람들이 고생해서 별도의 DB를 만들지 않고도 본인들의 DB를 이용할 수 있게, API를 제공합니다.

그리고 이 API를 이용하기 위해서는, 개발자 개인별로 발행되는 'API_KEY'가 필요합니다.

TMDB API Key 발급 받는 법

1. TMDB 사이트 가입부터

우선, 필수선행 조건. TMDB 사이트에 가입부터 해야 합니다.

2. API 발급 페이지로 이동하기

프로필 > 설정 > API로 이동합니다.

최종 도달하는 URL : https://www.themoviedb.org/settings/api

3. 개발하고자 하는 어플리케이션 등록하기

API_KEY를 발급받기 위해서는 우선,

내가 개발하고자 하는 서비스나 어플리케이션에 대해서

TMDB 측에 설명하고 등록을 해야 합니다.

여기서 중요한 점!

개발실습을 위해서 API_KEY를 발급받는 경우가 많을텐데,

그럼, 어플리케이션의 이름이야 그렇다 치고,

어플리케이션의 url 까지는 준비가 안 되어 있을 수 있습니다.

(대부분이 그렇겠죠?)

포기하고 뒤로 가기 누르지 말고 그냥,

그럴듯한 url 주소를 입력해줍니다.

어차피, 나중에 아래 그림에서 보이는 '상세정보' 탭에서 수정해줄 수 있습니다.

정말로 서비스를 출시할 때는 여기 와서 정보를 다시 제대로 수정해주면 됩니다.

4. API_KEY 발급완료!

이제 API_KEY가 발급되었습니다!

이 API_KEY를 활용해서, TMDB api에 호출을 할 수 있습니다.

나중에 다시 이 페이지에 접속하면, 본인에게 발급된 API_KEY를 다시 확인할 수 있습니다.

API KEY? API 읽기 액세스 토큰??

혹시나 API 키와 API 읽기 액세스 토큰이 각각 뭔지 궁금해하시는 분들을 위해서...

TMDB의 인증방식에는 크게 2가지가 있습니다.

API Key(v3) 방식은 일반적인 TMDB에 데이터를 요청할 때 많이 사용되고,

API_KEY + URL Query 형식으로 이용합니다.

가장 많이 쓰는 형태고, 대부분의 서비스에서 필요한 내용들은 다 지원됩니다.

고민하지 말고 API_KEY 방식으로 시작하시면 됩니다.

API 읽기 액세스 토큰 방식은 HTTP 헤더에 넣어서 사용하는 방식인데,

TMDB 웹서비스 자체에서 사용자가 저장해둔 정보(개인 계정정보)에

직접 접근해서 읽고, 쓰기 위해서는 이 방식을 사용해야 합니다.

(즐겨찾기 목록을 가져온다던지, 즐겨찾기 목록에 추가한다던지)

추가로 알아두면 좋을 몇 가지

TMDB api를 이용해서 개발된 사이트나 서비스를 비영리로 운영할 때는 상관없으나,

영리로 사용할 때는 TMDB 측에 신고를 하고, 일정 부분 수수료를 내야 합니다.

무료로 쿼리를 날릴 수 있는 횟수가 어느 정도 정해져 있고,

이 부분은 조금씩 변동되는 것 같습니다.

서비스를 설계할 때, api 호출 회수에 대한 관리가 어느 정도 필요합니다.

이제 문서를 읽어가면서 개발을 할 시간이네요.

문서는 아래를 참고하세요.

https://developer.themoviedb.org/docs/getting-started

Getting Started

Get started with the basics of the TMDB API.

developer.themoviedb.org

끝.

[favicon] 파비콘의 유래, 권장 규격, 그리고 만드는 법

SPACECHILD — Fri, 3 Oct 2025 23:54:39 +0900

파비콘 (favicon)

favorite icon의 줄임말이라고 하네요.

저도 검색해보고 처음 알았습니다.

이제는 고인이 되어버린, 인터넷 익스플로러....

IE 5 시절에 즐겨찾기를 하면 옆에 따라붙는 아이콘이라서 파비콘이라고 하네요.

요즘은 없으면 허전한거 같아요.

여러개의 탭을 열어놨을 때도 구분이 쉽고,

사이트의 정체성을 나타내기도 하고요.

특히, 구글 크롬에서는 브라우저의 홈 화면에서 뜨기도 해서

은근히 신경이 쓰이는 부분입니다.

파비콘의 규격 (확장자, 권장 사이즈)

전통적으로 기본 확장자는 .ico

요즘은 png, svg도 지원한다고 합니다.

파비콘의 기본 사이즈는 16x16 pixel 인데,

앞에서 살펴본 것처럼 사이트의 정체성을 대표하는 성격이 점점 강해져서

한번 만들 때, 동일한 이미지로

다양한 사이즈를 만들어 놓고 사용하는 경우가 많은 것 같습니다.

16x16px : 기본 파비콘 사이즈

32x32px : 고해상도 디스플레이 대비

48x48px : 북마크

180x180px : iOS 홈화면(웹페이지를 홈화면에 추가할 때(Add to home screen))

파비콘 만드는 법

16~64 px 의 정사각형 사이즈로!

Figma, Photoshop, Illustrator 같은 이미지 제작툴에서 만들고,

ico, png, svg로 내보내기를 하면 됩니다.

아니면, AI 시대 답게,

다양한 AI 도구들한테 '딸깍' 시전해봅시다.

favicon.io 같은 favicon generator를 사용하기도.

파비콘 적용하기

이 파일을 웹 루트 디렉토리에 favicon.ico 로 올리고,

html <head> 안에 link 태그를 추가해주면 끝.

* 아래는 예시

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

[tree] 프로젝트 구조를 트리로 보여주고, txt 파일로 저장하기(커맨드 라인 툴)

SPACECHILD — Thu, 2 Oct 2025 01:17:24 +0900

프로젝트의 코드 구조를 터미널에서 파악하고 싶을 때,

혹은 트리구조를 txt파일로 만들어서 공유하고 싶을 때 유용한 tree라는 앱이 있습니다.

설치하기

맥에 이미 홈브루가 설치되어 있다면, 터미널에서 아래 명령어로 설치가 가능합니다.

 brew install tree

아래와 같은 화면이 나오면서 설치 완료!

이제 원하는 위치에 가서 아래 명령어를 치면, 해당 폴더에 있는 파일들의 구조가 트리형식으로 표현이 됩니다.

tree

필수 Tree 명령어

그냥 tree 명령어를 치면, 모든 하위 폴더 안의 내용까지 다 나오기 때문에 몇 가지 옵션 명령어를 익혀두면 편합니다.

1. 기본 : 모든 구조를 다 보여준다.

tree

2. 디렉토리들만 보기 : 프로젝트 구조분석에 좋다.

tree -d

3. 단계별 구조분석 : 적당한 뎁스까지만 보여주기 때문에 가장 많이 사용한다. 외워두도록 하자.

tree -L 2

4. 트리구조 txt 파일에 추출(저장)하기 : 상당히 편하다.

2025년 10월 기준, ChatGPT 별도 앱을 VSCode와 연결을 한다고 해도, ChatGPT가 VSCode에서 편집중인 내 프로젝트의 구조에 직접 접근할 수 있는 것은 아니다.

만약, 내 프로젝트 구조를 인식시키고 대화를 이어가고 싶다면, 이 기능을 활용해보는 것도 좋을 듯.

꼭 그런 이유가 아니더라도, VSCode에 들어가지 않고도 txt 파일로 추출할 수가 있어서,

한번씩 써먹을 데가 있을 것이다.

tree > structure.txt

끝.

[.env] dotenv 파일 내에서 주석 처리하는 법과 주의사항

SPACECHILD — Mon, 29 Sep 2025 23:35:02 +0900

.env 파일이란 무엇인가?

.env 파일 형식은 간단한 key=value 쌍으로 이루어진 텍스트 파일이다

시스템의 환경 변수를 정의하는 데 사용되는 셀 스크립트 문법에서 유래했다고...

.env는 'enviroment'의 약자인 것.

.env 파일 형식을 사용하는 이유

보통 API_KEY를 저장한다던지, DATABASE_URL을 적어두는데 많이 사용한다.

민간함 정보를 코드에서 분리하여 하드코딩하는 것을 방지하는 목적이다.

API_KEY=YOUR_SECRET_KEY
DATABASE_URL=postgres://user:password@host:port/dbname

.env 파일 작성하는 법

위처럼 변수 이름은 대문자와 언더스코어(_)로 구성하는 것이 관례다.

관례는 적당히 따라줘야 간지라는 것을 명심하자.

.env 파일을 깃허브(GitHub)에 안올리고 제외하는 법

보통 .env 파일을 Git 에서 제외하도록 설정함으로써

민감한 정보가 저장소에 실수로 올라가는 것을 방지한다.

Next.js 프로젝트를 생성할 때, 자동으로 생성되는 .gitignore 파일을 열어보면,

아래처럼 스크린샷 처럼 .env 로 시작하는 모든 파일은 git에 올라가지 않도록 기본적으로 기재 되어 있다.

그래도 혹시 모르니 한번씩 확인하는 것이 좋겠다.

.env 파일 안에서 주석다는 법

.env 파일 안에서는 '#'을 사용해서 주석을 달 수 있다.

하지만 주의해야 한다.

#은 줄의 시작에 있을 때만 주석으로 인식한다.

# 올바른 주석 (파서가 무시함)
API_KEY=YOUR_SECRET_API_KEY

API_KEY=YOUR_SECRET_API_KEY # 잘못된 주석 (값의 일부로 인식될 수 있음)

변수 값 뒤에 붙는 인라인 주석은 파서(parser)에 따라 다르게 처리되거나, 주석부분까지 값의 일부로 인식될 수 있다.

참고하자.

끝.

마크다운 에디터에서 문단 구분선 입력하는 법(GitHub에서 readme 파일 편집)

SPACECHILD — Sun, 28 Sep 2025 10:29:00 +0900

GitHub에 있는 리드미(readme) 파일은 마크다운 서식을 사용한다.

* 참고로 readme 파일은 VSCode에서 직접 수정할 수도 있고, GitHub에서 수정할 수도 있다.

Next.js로 프로젝트를 생성한 경우에, readme에 자동으로 실행방법 등이 기재되어 있을텐데,

이 내용은 살려두고, 그 위에 자신의 메모를 입력하고 싶을 수 있다.

그럴 때, 문단 구분선으로 ***. ---, ___ 등의 구분자를 사용할 수 있다.

다 같은 결과를 보여준다

나는 ___ 방식을 쓰는 편

참고로 이렇게 GitHub 홈페이지에서 직접 리드미 파일을 수정해줬다면,

맥 VSCode 터미널이나, 맥 터미널(프로젝트가 있는 폴더에서) 아래 명령어를 쳐서,

로컬-GitHub에서 쓰는 프로젝트 파일을 동기화 시켜줄 필요가 있다.

git pull

[Next.js] Next.js 새 프로젝트 생성하는 법+옵션선택(Step by Step)

SPACECHILD — Sat, 27 Sep 2025 11:30:31 +0900

사전 준비 사항

npm과 Node.js는 당연히 설치가 되어 있다고 가정합니다.
나한테 Node.js가 있는지 없는지, npm이 있는지 없는지 모른다면 아래 글 참조

https://spacechild.net/607

프로젝트 생성하기

1. 프로젝트(폴더)를 생성할 폴더로 이동한다

저는 보통은 Projects/ 밑에 프로젝트 폴더를 만드니까, Projects 폴더로 이동합니다.

Next.js는 프로젝트 생성 명령어를 치면, 프로젝트가 생기면서 자동으로 폴더가 생성이 됩니다.

해당 폴더가 곧 프로젝트인 개념입니다.

2. 프로젝트 생성 명령어 실행

터미널에 아래 명령어 중 하나를 칩니다.

제일 많이 쓰는 건 npm 방식

# npm
npx create-next-app@latest my-app

# pnpm
pnpm create next-app my-app

# yarn
yarn create next-app my-app

많은 예제들이 npx 명령으로 새 프로젝트를 생성하는 방법을 알려줍니다.

npm이 안깔려 있는 사람은 없을 것이기에 그러는 거 같은데(node.js를 설치하면 자동으로 설치되니까)

저는 이미 npm, node.js, pnpm 모두 깔려 있기 때문에, 처음부터 pnpm 방식으로 생성합니다.

next.js 공식홈페이지에서도 npx를 이용해서 프로젝트를 생성하는 예제를 보여 주고 있지만,

뒤에 옵션을 잘 보면, '--use-pnpm'이라고 pnpm을 패키지 관리자로 쓰겠다고 선언하고 있습니다.

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

참고로 npm(npx)로 설치하든, pnpm으로 설치하든 아무런 차이가 없습니다.

패키지 관리자의 구분 문제이며, 개인개발자(1인 개발자)는 아무런 상관이 없습니다.

3. 프로젝트 설정 선택

2번에서 새 프로젝트 생성 명령어를 치면 화면처럼 다양한 설정 옵션들을 물어봅니다.

ㅇ TypeScript 쓸거냐? YES (추천)

ㅇ 코드 품질 관리 도구(linter) 뭐 쓸거야? ESLint (추천)

ㅇ Tailwind CSS 쓸거야? YES

ㅇ 'src/' 디렉토리 안에다가 네 코드 다 때려 넣을거야? YES (프로젝트 파일들 구조를 좀 깔끔하게 하고 싶으면)

ㅇ App Router 방식을 쓸거야?(추천) YES (Next.js 최신방식 / 그냥 무조건 YES)

ㅇ Turbopack 쓸거야?(추천) YES (개발속도를 획기적으로 개선 어쩌구 저쩌구... )

공식배포자가 추천이라고 했으면, 엄청난 자기만의 철학을 가진 게 아니라면 일단 써보는게 좋다는게 내 생각

ㅇ import alias 커스터마이징 쓸겨? YES (무조건 YES)

경로불러올 때, 설정 전 후로 아래처럼 바뀐다.

선택이라 아니라 무조건 강제하는게 맞다고 생각하는데, 이걸 선택으로 두고 있다.

설정 전 : import Button from '../../components/Button';

설정 후 : import Button from '@/components/Button';

ㅇ import alias 커스터마이징 한다고? 뭐 쓸거야? @/*

디폴트로 되어 있는데, @/* 을 추천한다. 다른걸로 표기해도 된다

여기까지 하면, 아래처럼 새 프로젝트가 완성되었음을 알 수 있다.

4. 프로젝트 실행하기

여기까지 했으면, 새로 생성된 프로젝트 폴더 안으로 들어가서, 개발서버를 실행해보면 됩니다.

pnpm dev,

pnpm run dev

어떤 명령어를 쳐도 결과는 같습니다.

http://localhost:3000/

를 웹브라우저에서 열어보면 아래 화면이 나오면 성공.

[ChatGPT] 유료 ChatGPT과 VSCode를 연동하는 법(CodeX 익스텐션)

SPACECHILD — Sat, 27 Sep 2025 09:15:37 +0900

안녕하세요. 스페이스차일드입니다.

ChatGPT 유료버전을 쓰고 있는데,

GitHub Copilot에서 제공하는 ChatGPT 버전은 늘 단독 ChatGPT 버전보다 낮더군요.

오늘은 ChatGPT 단독 앱과 VSCode를 연동하는 방법에 대해서 알아봅시다.

맥에 VSCode와 ChatGPT가 둘다 깔려 있다는 가정하에 진행합니다.

1. ChatGPT 하단의 저 모양을 클릭하면, work with...옵션에서 Code가 나옵니다.

설정한 적이 없으니 'Set up'이라고 나옵니다.

클릭

2. VSCode 내부 익스텐션 설치화면이 나오면서 CodeX가 나옵니다.

ChatGPT를 만든 Open AI사가 만든 익스텐션이네요.

인스톨.

인스톨 하려고 하면, 이거 만든 애를 믿냐고 묻습니다.

OpenAI... 나중에 레플리먼트칸트를 만들지도 모르지...

아무튼 믿는다고 하고 인스톨

3. 그러면 이제 ChatGPT 하단의 마크를 클릭하면,

Working with 목록에 VSCode가 있습니다.

클릭.

그러면 이제 VSCode에 있는 코드와 연동이 되면서, 내가 원하는 지점과 코드를 더 정확히 이해하는 상태가 됩니다.

한번씩 저렇게 Code(Inactive)라고 뜰 때가 있는데,

그건 VSCode 안에서 아무 파일을 안 열었거나(아무것도 editing 하지 않고 있거나),

특정 코드라인을 지정하지 않았을 때 뜹니다.

지금 참조하고 있는 코드 파일이 없다는 뜻입니다.

예를 들어 route.ts 파일을 선택하면 오른쪽과 같이 바뀝니다.

마치면서

VSCode 안에 내장되어 있는 GitHub Copilot은

유료버전을 결제하지 않으면, 질의응답하는데 제한이 있으니,

조금 더 풍부한 대화가 가능한 ChatGPT 단독 앱을 한번 연결해서 써보세요.

[Mac] 화면 전환해도 계속 따라다니는 챗GPT 앱 문제 해결법(Dock)

SPACECHILD — Thu, 25 Sep 2025 00:46:23 +0900

맥에서 ChatGPT를 앱으로 사용하고 있습니다.

아주 유용하게 잘 쓰고 있는데, 최초 설정 때 분명히 무슨 옵션을 켰던 것 같습니다.

저는 평소에 맥에서 바탕화면(데스크탑)을 여러 개 쓰는 <Spaces> 기능을 잘 쓰는데.

어느 날 갑자기, ChatGPT 앱이 어느 화면으로 전환을 해도 항상 따라오는 겁니다.

예를 들어, 한쪽 화면에서 ChatGPT를 쓰다가, 다른 화면에 띄워 놓은 VSCode로 돌아가면,

ChatGPT가 따라와서 다른 화면에서도 같은 위치에 항상 떠 있는 식입니다.

여간 불편한게 아니더군요.

몇 번을 검색을 해 봐도 해결법이 제대로 나오지 않았는데,

오늘 에러난 챗GPT 앱을 끄려고 독에 있는 챗GPT 앱을 우클릭했다가 발견했습니다.

ChatGPT 앱 우클릭 > Options > All Desktops

으로 되어 있어서 그랬던 것.

이 부분을

ChatGPT 앱 우클릭 > Options > This Desktop

이 부분을 바꿔주면, 한 화면에서만 얌전히 저를 기다리는 모습을 볼 수 있습니다.

이게 환경설정이 아니라, Dock 옵션에 들어가 있다니.... 허허..

저처럼 불편하셨던 분들에게 도움이 되길 바라며, 이렇게 글을 남겨봅니다.