개발 블로그🐶🐾

들어가며코드만 보면 우리 서비스의 SEO는 꽤 잘 되어 있는 것처럼 보였다.루트 레이아웃에 metadataBase, canonical, OpenGraph, robots 설정이 있었고, robots.ts와 sitemap.ts도 존재했고, 기사 상세에는 generateMetadata가 서버에서 동작해 제목과 OG를 정상 주입하고 있었고, Organization·NewsArticle 구조화 데이터(JSON-LD)까지 작성되어 있었다. 그런데 실제 프로덕션 HTML을 크롤러처럼 받아보니, 이야기가 완전히 달랐다. 1. 크롤러처럼 HTML 받아보기 점검 방법은 단순하다.크롤러는 JS를 실행하지 않으니, 프로덕션 페이지의 순수 HTML 응답을 받아서 그 안에 뭐가 들어있는지 보면 된다.curl로 받아도 되고, 브라..

0. 들어가며SEO는 개념적으로만 알고 실제로 직접 적용해본 적이 없었다.우리 서비스에 이미 세팅이 되어 있기도 했고, 다른 분이 담당해서 작업하셨기 때문에 적용되어 있는 코드만 봤던 정도! 그러다 이번에 작업할 여유가 생겨서 SEO 보완 작업을 직접 진행하게 됐다.본격적으로 손대기 전에, 요즘 검색 유입이 어떻게 굴러가는지부터 정리할 필요가 있었다. 예전이었다면 SEO 하나만 알면 됐을 텐데, 지금은 사용자가 구글 검색창이 아니라 ChatGPT 대화창에 질문을 던지고, 구글조차 링크 목록 대신 AI가 만든 답변을 먼저 보여준다. 그래서 검색 유입 최적화도 세 층위로 나뉘게 됐다.SEO, AEO, 그리고 GEO다. 이번 글은 그 세 가지 개념을 정리한 글이고, 실제 서비스에 적용한 작업기는 다음 글에서 ..

올해 초, 사내 Editor 서비스에 들어가는 마크다운 에디터를 만들었던 작업을 정리해보려고 한다.라이브러리 없이 직접 구현했는데, 그 이유부터 contentEditable으로 고민한 기록을 남겨본다 ㅎㅎ [ 배경 ]처음 드는 생각은 당연히 "에디터 라이브러리 사용하자!"였다. 근데 요구사항을 뜯어보니 불가능하단 걸 알았다 ..- 사내 디자인 시안의 UI를 그대로 지원해야 함- 개발 요구사항이 외부 라이브러리들과 다름기성 마크다운 에디터들은 마크다운 문법을 "지원하는" 방향으로 설계돼 있는데, 사내 요구는 반대로 문법을 선택적으로 차단하고 소거하고 제어 가능했다. 그래서 contentEditable DOM을 직접 제어하는 쪽으로 판단!마크다운 ↔ HTML 양방향 변환이랑 커서 보존을 우리 규칙대로 완전히..

오랜만에 아주 재밌는 작업을 하나 끝내서 기록하러 왔다 ㅎㅎ7월에 Claude Fable 5를 적극 활용해볼 방법을 찾다가, "서비스가 느리다"는 피드백이 생각났다.다양한 원인으로 서비스 속도가 느려진게 확실하기에 원인 파악을 어디부터 해야할지 싶었는데, Fable 5가 서비스 분석에 탁월하다했던 말이 떠올랐다.코드베이스 전체를 훑는 전수 진단으로 한 번 돌려보기로! 결과부터 말하면 JS 실전송량 -42%, 죽어있던 SSR 복구, 유휴 요청 -87% !외에도 라이트 하우스의 LCP 수치도, 기타 점수들도 개선되어 정리해두려고 한다.1. 프로덕션 minify (JS 실전송량 -42%)next.config를 보다가 발견한 코드config.optimization.minimize = false;이로 인해, 프로..

이번에 "PR 영향 범위 분석 자동화" 라는 기능을 도입해서 돌아온 블로그 ㅎㅎ 팀에서 작업하다 보면 공통 컴포넌트를 수정해야 하는 일이 생각보다 많다.그런데 공통 컴포넌트는 여러 화면에서 함께 사용되다 보니, 테스트 과정에서 영향받는 화면을 빠뜨리기 쉽다 ..ㅜ특히 새로운 기획자나 개발자가 합류하면 서비스 구조를 모두 파악하기 전까지는 어떤 화면을 함께 확인해야 하는지 알기 어려웠고, 결국 작업자와 리뷰어 모두 경험과 기억에 의존해 테스트를 진행하는 경우가 많았다.'이 과정을 시스템이 대신 알려줄 수는 없을까?'이런 고민에서 시작해 이번에 PR 영향 범위 분석 자동화를 도입하게 되었다! 도입 배경공통컴포넌트를 수정할 때, 그 변경이 어느 화면까지 영향을 주는지 파악하는 데 시간이 많이 들었다.그리고 나..

클로드 디자인을 한번 써보고 싶었는데, 당장 "어디에 쓰지?" 하고 고민이 됐었다.그러다 문득 생각이 났는데, 항상 뭘 만들어 볼 까 하다가도 시안이 없어서 어딘가 부족하게 마무리 되었던 사이드 프로젝트들 ..ㅋㅋㅋㅋ그래서 이번에 만들어 본 프로젝트에서는 클로드 디자인을 사용해보기로 했다!만들려고 했던 프로젝트는 날씨 웹사이트! ☀️클로드 디자인을 이용한 작업 플로우1. 프로토타입 가장 먼저 한 일은 프로토타입을 달라는 요청이었다.자세한 명세 없이 만들고 싶은 게 날씨 웹이라는 것만 전달했다.그리고 원하는 디자인 방향을 체크하고,첫번째로 받은 프로토타입이다.클로드 디자인 돌리기 전까지는 '어떤 식으로 디자인을 잡아야 할까?' 였는데,시안을 받고 나니 '이 부분 이렇게 바꾸는게 나을 것 같은데?', '이 ..

1년전 이맘때 상반기 회고를 썼었는데 ㅎㅎ 벌써 1년이 지났다니!지금 회사에서 프론트엔드 개발자로 일한지 1년 7개월.. 시간 정말 빠르다올해 상반기는 회사 내 나에게서도 변화도 많았고, 일도 많아서 ㅋㅋㅋ 유독 기록할 일들이 많았다. 상반기 회고이지만, 작년 가을부터 작성하는게 나에게 의미가 있을 것 같아 작년 겨울부터 천천히 되돌아보기! # 25.10 ~ 26.07 회고 10월- 팀 내 사수분이 퇴사하시고, 업무 인수인계 받느라 바빴던 10월그 동안 사수분께서 작업하신 부분들에 대해 인수인계도 받으며 처음으로 서비스 내 search 작업을 들어가보았다!책임감도 더 생겼고, 개인적으로도 다양한 경험을 해봐서 많이 달라졌던 시기였던 것 같다실제로도 이때쯤 많이 성장한 것 같다는 얘기를 상사분들께 많이 들..

뉴스레터 작업은 작년 이맘때 처음 시작했었다.현재 사내에서 발송하는 뉴스레터는 총 6종인데, 그중 3종은 처음부터 직접 구현했고, 나머지 3종도 기획이 종종 업데이트되면서 어쩌다 보니 1년째 꾸준히 작업하고 있다. 처음 뉴스레터 작업에 들어갔을 때는 "이메일도 결국 HTML 아닌가?"라고 생각했는데, 막상 해보니 웹이랑은 완전 다른 코드였다.네이버에서는 잘 보이는데 Gmail에서 깨지고, Gmail에서 해결했더니 Outlook에서 또 다르게 보이고... 작업하면서 알게 된 내용들이 생각보다 많아서, 기억이 더 휘발되기 전에 정리해두려고 한다.뉴스레터 템플릿은 웹처럼 못 만드는 이유이메일은 우리가 만든 HTML을 Gmail, Outlook, Apple Mail 같은 메일 클라이언트가 각자의 방식으로 해석해..

바쁘단 핑계로 너무너무 오랜만에 방문한 블로그 ....ㅎㅎ 3월쯤 WIP PR에 대한 정보를 알게 되고, 현재 우리 팀에 적용하면 좋을 것 같아 WIP PR을 제안했었다.잊기 전에 도입하게 된 배경과 팀 내 활용 방식 그리고 효과에 대해 정리하려고 글을 남긴다 제안 배경각자 한 가지의 작업만 진행하는 것이 아니라, 병렬적으로 여러 작업을 진행하고 있어 팀원의 작업 파악이 어려움.도입 후 해결 가능한 문제1. 작업 진행상황 파악 → 팀원이 현재 어떤 작업을 진행 중인지 별도 공유 없이도 확인2. 중간에 중단되는 작업 → 추후 작업을 이어서 진행하는 경우, 브랜치 찾기 용이3. 바로 반영 못하는 작업 → 반영 필요한 작업 한눈에 파악 가능4. 팀 내 리소스 파악 가능활용 방식1. 작업을 시작하면 지라 이슈 ..

테스트용 API가 필요했는데,다른 팀에 요청 드리기 애매한 상황에 추천 받은 Google Sheets API ! 1분도 안걸릴 정도로 간단해서 포스팅하러 가져왔숩니다 .. Google Sheets API 만드는 법1. 구글시트를 켜서 원하는 필드와 데이터를 입력한다. 2. 탭 이름을 설정한다. 3. 공유하기를 눌러서 링크가 있는 모든 사용자로 변경한다. 4. 링크를 복사 한다. 링크 복사를 누르면,https://docs.google.com/spreadsheets/d/1BU1@@@@@@@/edit?usp=sharing 이런 링크가 복사되는데저기서 빨간색으로 표시한 부분이 시트 ID 이다. 그리고 시트의 탭 이름은 위에서 설정한 Info https://opensheet.vercel.app/시트ID/시..