<?xml version="1.0"?>
<?xml-stylesheet href="https://hyeonseok.com/static/css/rss.css" type="text/css"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>신현석(Hyeonseok Shin)</title>
		<link>http://hyeonseok.com/</link>
		<description>사는 이야기, 웹개발 이야기</description>

		<language>ko-kr</language>
		<managingEditor>hyeonseok@gmail.com (Hyeonseok Shin)</managingEditor>
		<webMaster>hyeonseok@gmail.com (Hyeonseok Shin)</webMaster>
		<docs>http://blogs.law.harvard.edu/tech/rss</docs>
		<atom:link href="https://hyeonseok.com/rss/" rel="self" type="application/rss+xml" />
		<image>
			<url>http://hyeonseok.com/hyeonseok.png</url>
			<title>신현석(Hyeonseok Shin)</title>
			<link>http://hyeonseok.com/</link>
		</image>
		<item>
			<title>사피엔스</title>
			<link>https://hyeonseok.com/blog/948</link>
			<guid>https://hyeonseok.com/blog/948</guid>
			<description><![CDATA[<p><img src="/static/blog/sapiens.jpg" class="major" alt="사피엔스 책 표지"> 워낙 유명한 책이다. 히브리어로 쓰여져서 무려 30여개의 언어로 변역됐다고 한다. 그러면 이 책은 히브리어에서 번역된 것일까 영어에서 번역된 것일까 갑자기 궁금해졌서 찾아봤다. 2011년 히브어로 책이 나오고 2014년 영어판이 나오면서 유명해 졌다고 한다. 한국어 판은 이 영어판을 번역해서 2015년 김영사에서 출간한 책이라고 한다. 책 제목만 봤을땐 철학적이어서 너무 어렵지 않을까 싶었는데 읽어보니 역사책이지만 지극히 과학적이고 곳곳에 유쾌한 상상력들이 가미되어 있어서 아주 재미있다.</p>

<p>인류는 어떻게 다른 종과 달랐고 현재 어떤 위치에 있는지 깊은 통찰력을 보여준다. 네안데르탈인이나 다른 인간 종들이 있었지만 사피엔스가 다 쓸어버렸다는 데에서는 좀 충격도 받았다. 인류는 정말 독보적으로 지구를 변화시켰고 앞으로도 그럴 것으로 생각된다. 현재의 과학으로 일어나는 일을 봤을 때 사피엔스가 계속될지에 대한 질문도 아주 날카로왔다. AI가 큰 역할을 할 것 같은데 사피엔스가 진화론적인 관점에서 계속 존재할지는 나도 부정적이다.</p>

<p>앞으로 큰 변화가 있을 것 같은데 이런 변화를 어떤 관점으로 봐야 할지를 다시 생각할 수 있게 해주는 좋은 책이다. 특히 인류의 많은 문화나 개념들이 종교와 같이 상상을 토대로 한 것이라는 관점은 참으로 신선하다. 인류에 대해서 많은 것을 배웠고 지금 일어나는 일들을 이해하는데 많은 도움이 되었다.</p>]]></description>
			<pubDate>Sun, 11 Jan 2026 11:53:18 GMT</pubDate>
		</item><item>
			<title>자전거 펌프로 자동차 타이어 공기 주입하기</title>
			<link>https://hyeonseok.com/blog/947</link>
			<guid>https://hyeonseok.com/blog/947</guid>
			<description><![CDATA[<p>겨울이 되어서 날씨가 추워지니 자동차 타이어의 공기압이 낮다는 경고가 떴다. 과거에는 공기압 경고가 뜨면 긴급 출동을 불러서 공기를 보충하곤 했다. 그러다가 자동차 타이어나 자전거 타이어나 똑같다는 말을 들고 직접 공기를 채워봐야 겠다고 생각하고 있었는데 드디어 그 시간이 왔다.</p>

<p>최근에는 자동차 타이어에 공기를 주입하는 키트가 자동차에 포함되어 있는 경우가 많고 따로 판매하기도 한다. 시거잭에 전원을 연결해서 공기압을 설정하고 타이어에 자동으로 공기를 주입하는 방식이다. 내차는 연식이 좀 되어서 없다.</p>

<p>자전거는 자주 공기를 주입해야 해서 자전거용 펌프를 하나 구입해서 사용해왔다. 압력계도 달려 있고 공기 호스를 연결한 후에 위아래로 레버를 누르면 공기가 주입되는 방식이다. 공기 주입구의 종류가 여러가지여서 젠더도 포함이 되어 있고 주입구에 따라서 약간의 조작이 필요하다. 주입구 종류는 보통 던롭, 슈레더, 프레스타 등이 있는데 유투브를 좀 찾아보니 <a href="https://www.youtube.com/watch?v=DKx6ayx3sPQ">[자전거 관리] 공기압 넣는 방법ㅣ던롭ㅣ프레스타ㅣ슈레더</a> 이 영상이 제일 이해하기 쉽게 설명해 주고 있다.</p>

<p>오토바이나 자동차는 슈레더 방식을 많이 사용해서 자전거 펌프를 연결하고 자전거 공기 주입하듯이 하면 된다. 다만 자전거에 비해서 타이어가 훨씬 두껍고 공기도 많이 들어가서 좀 힘이 든다. 뒷바퀴는 20psi, 앞바퀴는 24psi 정도였는데 다 33psi로 주입하니 매우 힘들었다.</p>

<p>주입을 하고 차를 주행하니 바퀴 네개가 다 36psi로 나온다. 아마 자전거 펌프의 압력계가 좀 낮게 나오거나 주행을 좀 해서 압력이 올라간 것인 듯싶다. 직접 정비를 하니 힘은 좀 들었지만 상당히 뿌듯하다. 힘들어서 사진은 없다.</p>

<p>추가로 psi를 '프사이'라고 읽었었는데 같은 발음의 다른 의미와 헷갈리지 않게 압력의 단위는 '피에스아이'라고 읽는게 좋다고 한다. 또 파스칼과는 뭐가 다른가 살펴봤더니 이거는 'Pound per Square Inch'라고 한다. 인치나 피트 같은 놈이다. 미국에서 주로 쓴다고 한다. 되도록 표준인 바(bar)나 파스칼(Pa)을 쓰도록 하자.</p>]]></description>
			<pubDate>Fri, 26 Dec 2025 10:18:25 GMT</pubDate>
		</item><item>
			<title>한/영 키나 오른쪽 ALT키로 한영전환이 안 될 때 </title>
			<link>https://hyeonseok.com/blog/946</link>
			<guid>https://hyeonseok.com/blog/946</guid>
			<description><![CDATA[<p><img src="/static/blog/windows-ime-change-right-alt.png" class="major" alt="윈도우11 키보드 레이아웃 설정 변경 화면"> 갑자기 스페이스바 오른쪽의 한/영 키나 오른쪽 ALT키로 한영전환이 되지 않는다면 키보드 레이아웃을 다시 바꿔주면 된다. <kbd>윈도우</kbd> + <kbd>I</kbd>를 눌러서 설정에 들어가서 '시간 및 언어 &gt; 언어 및 지역 &gt; 옵션'에 들어가서 키보드 섹션에서 키보드 레이아웃을 '101키 종류1'로 바꿔준다. 종류2나 3으로 바꿔보면 바로 아래에 한/영 전환과 한자 변환에 어떤키를 사용할지 표시되기 때문에 취향에 맞게 골라주면 된다. 재부팅이 필요하다.</p>]]></description>
			<pubDate>Sat, 13 Dec 2025 12:36:31 GMT</pubDate>
		</item><item>
			<title>드림씨어터 40주년 기념 앨범 Quarantième: Live à Paris</title>
			<link>https://hyeonseok.com/blog/945</link>
			<guid>https://hyeonseok.com/blog/945</guid>
			<description><![CDATA[<p><img src="/static/blog/dream-theater-40th-live-in-paris.jpg" class="major" alt="Dream Theater - Quarantième: Live à Paris" /> 드림씨어터의 팬이지만 라이브는 불편해서 잘 듣지 않는다. 하지만 <a href="https://www.youtube.com/playlist?list=OLAK5uy_lpkFDaEI8aoScCzn_EC2jYyqK5XOeuBYw">이번 앨범 'Quarantième: Live à Paris'</a>는 듣다가 간만에 CD까지 구매했다. 파리의 아디다스 아레나에서 녹음되었고 DVD 촬영을 같이 했다고 하는데 소리도 아주 좋다. 앨범 제목은 프랑스어 인데 영어로 '40th: Live in Paris'를 의미한다. 드림씨어터의 40주년 기념 라이브 앨범이고 포트노이의 복귀 앨범이기도 하다.</p>

<p>처음에는 보컬 소리가 많이 달라서 라브리에가 아닌줄 알았다. 아무래도 예전 처럼 고음 위주로 노래하기는 힘드니 창법도 바꾸고 키도 바꿔서 소리가 조금 달라졌다고 한다. 조단 루디스의 음색도 아주 풍부하다. 존명도 솔로 파트에서 드라이브가 잔뜩 걸린 소리를 들려준다. 패트루치야 항상 한결같다. 앨범 전반적으로 좀 헤비한 느낌이다. 시간이 참 빠르다. 앞으로도 계속해서 좋은 음반이 나오기를 기대한다.</p>]]></description>
			<pubDate>Sat, 29 Nov 2025 05:22:32 GMT</pubDate>
		</item><item>
			<title>오픈AI 아틀라스 브라우저</title>
			<link>https://hyeonseok.com/blog/944</link>
			<guid>https://hyeonseok.com/blog/944</guid>
			<description><![CDATA[<p><img src="/static/blog/atlas-installer.png" class="major" alt="아틀라스 인스톨러" /> <a href="https://chatgpt.com/atlas/">오픈 AI에서 아틀라스라는 브라우저</a>를 내놨다고 해서 깔아봤다.</p>

<p><img src="/static/blog/atlas-login.png" class="major border" alt="아틀라스 설치 로그인 안내" /> 챗GPT 계정으로 로그인 해야 사용할 수 있다.</p>

<p><img src="/static/blog/atlas-passkey-error.png" class="major" alt="아틀라스 패스키 찾지 못함" /> 뭔가 오류가 있는지 패스키를 사용할 수 없다.</p>

<p><img src="/static/blog/atlas-install-done.png" class="major border" alt="아틀라스 설치 완료" /> 다른 브라우저의 정보를 가져온다든가 기본 브라우저 설정, 기본적인 아틀라스 사용법 안내를 받으면 설치가 완료된다. 챗GPT 계정만든지 벌써 3년이 되었다.</p>

<p><img src="/static/blog/atlas-new-tab.png" class="major border" alt="아틀라스 새 탭" /> 첫인상은 아주 심플한데 놀랍게도 주소창이 없다. 주소창이 있을 것 같은 곳에 마우스를 올리면 주소창이 나오고 여기에 입력을 할 수 있다. <img src="/static/blog/atlas-address-bar.png" class="major border" alt="아틀라스 주소창" /> 메시지를 입력하면 챗GPT와 연결되는 추천 메시지가 나오고 구글 검색도 선택할 수 있다. 연관도가 높은 웹페이지도 같이 나온다. 메시지가 아닌 URL을 입력하면 웹사이트로 연결된다. 지금까지 대부분의 브라우저는 구글이 주소창을 독점했는데 이에 대한 강한 도전이 보인다.</p>

<p><img src="/static/blog/atlas-ask-chatgpt.png" class="major border" alt="아틀라스 Ask ChatGPT" /> 웹페이지에서 사이드 바를 열어서 그 페이지를 대상으로 채팅을 할 수 있다. 페이지를 요약한다든가 인스타그램 프로필을 개선하는 것과 같은 추천 작업도 나온다. 이제 사람들이 긴글은 요약해달라고 하고 자세히 안 읽게 될 것 같다. 필요한 것을 자연어로 질의하는 식으로 많이 바뀔 것 같다.</p>

<p>사용자 에이전트 문자열은 <code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36</code>로 나오는데 이거는 웹뷰의 문자열이고 아틀라스는 <code>ChatGPT Atlas/1.2025.288.15 (Mac OS X 15.6.1; arm64; build 20251023205637000) Aura/1.2025.288.15</code>를 사용한다고 한다.</p>

<p>입력기 관련 버그가 하나 보였지만 전통적인 브라우저 UX를 많이 건드렸음에도 만듦새가 좋다. MCP 나왔을 때 브라우저가 없어지는 것이 아닌가 싶었는데 제품이 벌써 나왔다. 기술 변화가 정말 빠르다. 앞으로 오픈AI가 어떻게 시대를 바꿔갈지 기대가 된다.</p>
]]></description>
			<pubDate>Sat, 25 Oct 2025 07:41:25 GMT</pubDate>
		</item><item>
			<title>극장판 귀멸의 칼날: 무한성편</title>
			<link>https://hyeonseok.com/blog/943</link>
			<guid>https://hyeonseok.com/blog/943</guid>
			<description><![CDATA[<p><img src="/static/blog/kimetsu-no-yaiba-poster.jpg" class="major" alt="극장판 귀멸의 칼날 무한성편 포스터"> 스케일도 커졌고 액션도 커졌다. 무한열차도 수준급이었고 무한성편도 그렇다. 이번 것은 1편이고 3편까지 나와야 단행본 스토리까 끝날 것 같은데 완결 보려면 시간이 꽤나 걸릴 것 같다. 러닝타임이 좀 길다. 흥행에 어느정도 자신이 있어서 이런 구성으로 나올 수 있는 것 같다. 돌비 시네마에서 보길 잘했다고 생각할 정도로 액션이나 극적인 효과가 좋다. 포스터를 좀 찾아봤는데 <a href="https://x.com/animaxplus_kr">애니맥스 플러스의 트위터 계정</a>에서 고화질 포스터를 올려놨다. <img src="/static/blog/kimetsu-no-yaiba-character.jpg" class="major" alt="극장판 귀멸의 칼날 무한성편 등장인물 포스터"></p>]]></description>
			<pubDate>Sat, 06 Sep 2025 10:53:03 GMT</pubDate>
		</item><item>
			<title>의미에 맞는 href 사용</title>
			<link>https://hyeonseok.com/blog/942</link>
			<guid>https://hyeonseok.com/blog/942</guid>
			<description><![CDATA[<p>링크에 <code>onclick</code> 핸들러를 달 때 <code>href</code>에 <code>#</code>을 많이 사용하는데 특이하게 <code>http://</code>를 사용한 경우를 봤다. 딱히 신경쓰지 않고 있었는데 이로 인한 버그가 리포팅됐다.</p>

<p><img src="/static/blog/semantic-href.png" class="major" alt="페이지 표시 오류가 발생한 사파리 브라우저" /> 사파리는 링크를 롱탭해서 프리뷰를 볼 수 있는데 <code>http://</code>로 <code>href</code> 값을 정하면 프리뷰에서 오류가 발생한다. 이 외에도 새탭을 연다든가 북마크로 저장을 한다든가 할 때도 오류가 발생할 것이다.</p>

<p><code>href</code> 값이 필요 없는 경우에는 <code>&lt;button&gt;</code> 요소를 사용하도록 하자. HTML의 의미가 왜 중요한지 말해주는 또 하나의 사례라고 할 수 있겠다.</p>]]></description>
			<pubDate>Sun, 24 Aug 2025 06:39:59 GMT</pubDate>
		</item><item>
			<title>클라우드 플레어 뒤에 있는 웹서버에서 사용자 IP를 로그로 남기기</title>
			<link>https://hyeonseok.com/blog/941</link>
			<guid>https://hyeonseok.com/blog/941</guid>
			<description><![CDATA[<p>클라우드 플레어 뒤에 있는 웹서버의 로그를 보니 클라우드 플에어 프록시 서버의 IP를 남기고 있다. 클라우드 플레어는 <code>CF-Connecting-IP</code>로 실제 IP를 넘겨주고 있어서 이것을 이용하게 설정할 필요가 있다.</p>

<p>엔진엑스의 <code>real_ip</code> 모듈을 사용하면 특정 IP 범위의 요청에서 <code>$remote_addr</code>의 값을 변경할 수 있게 해 준다. 클라우드 플레어의 IP 범위는 <a href="https://www.cloudflare.com/ips-v4/">https://www.cloudflare.com/ips-v4/</a> 주소에서 텍스트 형태로 제공하고 있다. 이 것을 엔진엑스에서 <code>set_real_ip_from</code>으로 추가하고 클라우드 플레어가 전달해주는 실제 IP로 덮어 써주면 된다.</p>

<pre><code>http {
    set_real_ip_from 173.245.48.0/20;
    set_real_ip_from 103.21.244.0/22;
    set_real_ip_from 103.22.200.0/22;
    set_real_ip_from 103.31.4.0/22;
    set_real_ip_from 141.101.64.0/18;
    set_real_ip_from 108.162.192.0/18;
    set_real_ip_from 190.93.240.0/20;
    set_real_ip_from 188.114.96.0/20;
    set_real_ip_from 197.234.240.0/22;
    set_real_ip_from 198.41.128.0/17;
    set_real_ip_from 162.158.0.0/15;
    set_real_ip_from 104.16.0.0/13;
    set_real_ip_from 104.24.0.0/14;
    set_real_ip_from 172.64.0.0/13;
    set_real_ip_from 131.0.72.0/22;

    real_ip_header CF-Connecting-IP;
    ...
}</code></pre>

<p>이렇게 하면 로그 템플릿의 <code>$remote_addr</code>이 클라우드 플레어가 전달해주는 IP로 치환되어 저장되게 된다.</p>]]></description>
			<pubDate>Sat, 23 Aug 2025 13:10:51 GMT</pubDate>
		</item><item>
			<title>F1 더 무비</title>
			<link>https://hyeonseok.com/blog/940</link>
			<guid>https://hyeonseok.com/blog/940</guid>
			<description><![CDATA[<p><img src="/static/blog/f1-the-movie.webp" class="major" alt="F1 the movie poster"> 트레일러 영상이 나왔을 때 소리가 아이폰의 진동 센서와 연동되었다고 해서 사람들 사이에서 이슈였던 영화다. 메가박스 남양주 현대아울렛 스페이스원 돌비 시네마에서 봤는데 음향과 음량이 정말 뛰어났다. 자동차 엔진의 저음이 몸이 떨릴 정도로 강하게 전달 됐다. 영화 평점에서 시나리오가 0점이길래 내용이 그리 없나 싶었지만 나름 짜임새 있어서 재미있게 봤다. 결국 승리 트로피를 누가 받을지 궁금했는데 엔딩도 나름 괜찮았다.</p>
<p>레이싱을 잘 안다고 생각한 적은 없었는데 영화 처음에 나오는 데이토나 트랙도 아는 트랙이고 계속 해서 나오는 레이싱 관련 내용도 상당히 이해가 잘 가서 레이싱 게임을 열심히 한게 좀 도움이 됐다. 아무 생각없이 갔는데 돌비 5주년 특가로 인당 만원에 봤다. 몰입도가 상당한 잘 만든 영화다.</p>]]></description>
			<pubDate>Sat, 16 Aug 2025 09:25:19 GMT</pubDate>
		</item><item>
			<title>웹 애니메이션 API</title>
			<link>https://hyeonseok.com/blog/939</link>
			<guid>https://hyeonseok.com/blog/939</guid>
			<description><![CDATA[<p>시작은 제이쿼리로 되어 있는 코드를 바닐라로 변환이 필요해서 였다. 화면에서 보이지 않다가 특정 조건에서 화면에 나오는 애니메이션을 보여주는 기능이었다. 챗지피티에 물어보니 전반적인 변환은 잘 해줬는데 화면에 나오기 직전에 <code>display: none</code>을 <code>block</code>로 바꿔주다 보니 트랜지션 애니메이션이 작동하지 않았다. <code>element.offsetWidth;</code>같이 레이아웃을 참조하면 애니메이션이 되지만 다른 방법은 없는지 제미나이에게 물어보니 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/animate"><code>element.animate</code></a>를 사용해서 변환을 했다. <code>display</code> 조작의 영향을 받지 않고 의도대로 작 작동한다.</p>

<p>키프레임 애니메이션을 자바스크립트로 구성하는 느낌이다. <code>element.animate(keyframes, options)</code>와 같이 사용하면 간단하게 이용할 수 있다.</p>

<pre><code>document.querySelector('div').animate([
	{ width: '100px' },
	{ width: '200px' },
], {
	duration: 500,
	fill: 'forwards',
	easing: 'ease'
});</code></pre>

<p><a href="https://caniuse.com/mdn-api_element_animate">나온지 10년</a>이 다 되어가는데 잘 모르고 있었다. CSS로 애니메이션을 제어하는 것을 선호하기는 하는데 동적으로 변경되는 애니메이션을 만들어야 할 때에 유용하게 사용할 수 있다. <a href="https://caniuse.com/mdn-api_element_animate_options_timeline_parameter">타임라인</a>이나 <a href="https://caniuse.com/mdn-api_element_animate_options_rangestart_parameter">레인지</a>도 정의할 수 있는데 파이어폭스가 아직 지원을 안한다.</p>]]></description>
			<pubDate>Sat, 09 Aug 2025 08:13:48 GMT</pubDate>
		</item>
	</channel>
</rss>