[hyeoniverse]

무엇을

MacFolio(macfolio.hyeoniverse.com)의 휴대폰 화면은 이 사이트를 iframe으로 띄웁니다. 이때 위의 상태 표시줄 뒤를 이 페이지 맨 위 색으로 칠해서, 머리 막대가 상태 표시줄 뒤까지 이어진 것처럼 보이게 합니다 (iOS Safari처럼).

MacFolio는 도메인이 달라 이 페이지 안을 직접 읽을 수 없습니다. 그래서 페이지가 자기 맨 위 색을 알려 주는 작은 스크립트(macfolio-bar-color.js)를 넣었습니다.

어떻게

• iframe 안에서 열렸을 때만 동작합니다. 사이트를 혼자 열면 아무것도 하지 않습니다.
• 맨 위 가운데에 보이는 요소부터 부모로 올라가며, 처음 만나는 칠한 바탕색을 읽습니다.
• 색이 바뀔 때만 window.parent.postMessage({ type: 'macfolio:bar-color', color }, '*')로 보냅니다.
  • 보내는 것은 색 값 하나뿐입니다.
  • MacFolio 주소가 여럿(배포, 미리보기, 로컬)이라 받는 곳을 정하지 않습니다.
  • MacFolio는 자기가 띄운 iframe에서 온 메시지만 받습니다.
• 다시 읽는 때: 처음 열 때, 스크롤, 크기 바뀜, 화면 모드 바뀜, 그리고 1초마다.
• 같은 도메인의 별도 파일이라 의존성이 없고, 앱 번들에도 들어가지 않습니다.

확인

• 브라우저에서 부모 페이지 안 iframe으로 열어 확인했습니다.
  • 맨 위가 파란 페이지에서는 rgb(59, 130, 246)을 보냅니다.
  • 스크롤해서 흰 부분이 맨 위에 오면 rgb(250, 250, 250)을 다시 보냅니다.
  • 혼자 열면 아무것도 보내지 않고 오류도 없습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
newpick	Error		Oct 7, 2026 8:55pm UTC

[hyeoniverse]

개인 작업이라 팀 레포가 아닌 개인 레포로 옮깁니다.