전체 글118 블로그 다국어 자동화 (hreflang, AI번역, 국제화라우팅) 블로그 다국어 자동화 (hreflang, AI번역, 국제화라우팅)솔직히 저는 한국어 블로그에 영어권 유입이 이렇게 있을 줄 몰랐습니다. 구글 애널리틱스를 우연히 들여다보다가 개발 관련 글 몇 편이 해외에서도 꽤 읽힌다는 걸 발견했고, 그날 바로 다국어 자동화 시스템을 만들기로 결심했습니다. 직접 구축해보니 일반적으로 알려진 것보다 훨씬 손이 많이 가는 작업이었고, 특히 hreflang 설정에서 예상치 못한 함정을 만났습니다. hreflang 자동 삽입, 설정 하나 잘못됐을 때 생기는 일시스템 구성 자체는 단순한 편이었습니다. 글이 발행되면 AI 번역 API를 호출해 영어(/en/)와 일본어(/ja/) 정적 페이지를 각각 생성하고, 각 페이지의 head에 hreflang 태그를 자동으로 넣는 스크립트를 짰.. 2026. 7. 5. RSS 피드 AI 요약 (피드생성, AI요약, 구독자경험) RSS 피드에 글 전체를 넣으면 방문자가 줄고, 앞부분만 자르면 구독자가 떠납니다. 저도 이 딜레마를 꽤 오래 안고 있었는데, AI API로 요약을 자동 생성해서 description 필드에 넣는 방식으로 어느 정도 실마리를 찾았습니다. 다만 이 방법이 완벽한 정답인지는, 써보면서도 계속 고민 중입니다.피드생성: RSS 구조를 직접 건드리기까지솔직히 처음에는 RSS 피드를 그냥 플러그인에 맡겨두고 신경을 껐습니다. 글이 올라가면 자동으로 피드에 들어가고, Feedly나 Inoreader 같은 피드 리더에서 읽히면 그걸로 충분하다고 생각했거든요.그런데 어느 날 애널리틱스를 보다가 이상한 걸 발견했습니다. 피드 구독자 수는 꾸준한데 사이트 방문은 거의 늘지 않는 겁니다. 확인해보니 글 전체가 RSS의 des.. 2026. 7. 4. 노션 CMS 자동화 (Notion API, GitHub Actions, 정적 사이트) 노션에서 글을 다 써놓고, 워드프레스에 붙여넣기 하다가 이미지가 통째로 날아간 경험 있으신가요. 저는 그게 반복되면서 발행 한 편에 30분을 넘기고 있었습니다. 결국 Notion API와 GitHub Actions를 엮어 자동 발행 파이프라인을 직접 만들었고, 지금은 노션에서 상태 값 하나만 바꾸면 다음 날 블로그에 글이 올라옵니다.Notion API로 '쓰는 도구'와 '보여주는 도구'를 분리하다저도 처음에는 노션을 그냥 초안 메모장처럼 썼습니다. 글이 완성되면 워드프레스 편집기를 열고, 복사하고, 이미지를 다시 올리고, 서식을 맞추는 과정을 매번 반복했죠. 어느 날 발행 직전에 이미지 링크가 전부 깨진 걸 발견하고 나서야 "이건 사람이 할 일이 아니다"라는 생각이 들었습니다.Notion API는 노션의.. 2026. 7. 3. 워드클라우드 자동화 (키워드 추출, 레이아웃, 접근성) 블로그 글이 100개를 넘어가던 날, 엑셀 시트를 열었다가 조용히 닫았습니다. 셀마다 키워드를 손으로 옮겨 적던 방식이 더는 통하지 않는다는 걸 그날 실감했습니다. AI API로 키워드를 뽑고, CSS로 워드클라우드를 자동 생성하기까지 — 삽질도 꽤 많았지만, 지금은 매달 글이 올라올 때마다 클라우드가 혼자 갱신됩니다. 그 과정에서 배운 것들을 풀어봅니다.키워드 추출과 레이아웃: AI와 d3-cloud가 해결한 것들처음엔 TF-IDF 방식으로 키워드를 뽑으려 했습니다. TF-IDF란 특정 단어가 문서 안에서 얼마나 자주 나오는지(TF)와, 전체 문서 중 그 단어가 등장하는 문서 비율의 역수(IDF)를 곱해 단어의 상대적 중요도를 수치화하는 방법입니다. 이론적으로는 깔끔하지만, 한국어 블로그 글에 바로 적.. 2026. 7. 2. CSS 타임라인 (position 활용, 구조 설계, 접근성) 타임라인 UI를 만들 때 가장 어렵다고 생각하는 게 뭔지 물어보면, 대부분 "애니메이션"이나 "디자인"을 꼽습니다. 그런데 제가 직접 써봤는데, 진짜 발목을 잡는 건 따로 있었습니다. 수직선 하나 제대로 그리는 것, 그리고 그 선과 카드를 맞물리게 하는 position 속성의 이해였습니다. 블로그에 "개발자가 된 과정"을 연대기로 정리하면서 처음 타임라인을 도입했는데, 줄글로 쓸 때는 독자가 연도별 흐름을 거의 파악 못 한다는 걸 그때 처음 실감했습니다.수직선 하나에 이렇게 많은 게 걸려 있을 줄 몰랐습니다CSS 타임라인 구현에서 핵심이 되는 건 position 속성입니다. 여기서 position이란 HTML 요소가 문서 흐름 안에서 어디에 자리를 잡을지, 그리고 그 기준점을 무엇으로 삼을지를 제어하는 .. 2026. 7. 1. 블로그 계산기 만들기 (이벤트 처리, AI 프롬프팅, 유지보수) 블로그에 인터랙티브 계산기를 넣었더니 포스팅 체류 시간이 두 배 이상 늘었습니다. 처음엔 반신반의했는데, 독자들이 값을 바꿔가며 직접 계산해보는 경험 자체가 콘텐츠가 된다는 걸 그때 처음 실감했습니다.이벤트 처리, 생각보다 어렵지 않았습니다계산기를 블로그에 처음 넣어보려 했을 때, 가장 막막했던 부분이 바로 이벤트 처리(Event Handling)였습니다. 여기서 이벤트 처리란 사용자가 버튼을 클릭하거나 값을 입력하는 행동에 반응해 JavaScript가 특정 함수를 실행하도록 연결하는 구조를 말합니다. 요즘 워드프레스나 티스토리 블로그에서 "버튼을 눌렀을 때 뭔가 일어나는" 동작은 거의 다 이 구조로 작동한다고 보면 됩니다.제가 직접 써봤는데, onclick 속성을 HTML 태그에 직접 써서 함수를 호출.. 2026. 6. 30. 이전 1 2 3 4 5 ··· 20 다음
