소개
블로그 작성용 글감관리 대시보드를 하나 만들어야 겠다고 생각했어요. 어떤글을 발행예정인지, 우선순위도 파악하고, 작성하던글에 대한 블로그 발행,미발행 여부도 즉시 확인이 가능하다면 다음 글작성 시간절약을 위해서 진행하게 되었어요.
"키워드 글감 대시보드"에 검색·필터·정렬·발행완료 현황을 알수 있게 설계했구요.
"지금 쓰기"버튼을 만들어 놓긴 했는데, 눌러도 글쓰기로 이동하지 않는 문제가 발생했어요.
진행 방법
1) "지금 쓰기" 버튼에 실제 동작을 붙였어요
처음엔 이렇게 설계했어요. 버튼을 누르면 (1) 제목 후보·질문형 소제목이 담긴 초안 md 파일을 다운로드하고, (2) 네이버 블로그 새 글쓰기 탭을 자동으로 열어주는 거예요. 클로드에게 "초안 다운로드 + 네이버 새글쓰기 탭 동시에 열기, 둘 다 해줘"라고 요청해서 구현했어요.
한국사이트 스크린샷
2) 테스트하다가 "이대로는 복붙이 안 되겠다"는 걸 깨달았어요
막상 새 글쓰기 탭에 초안 md 파일 내용을 붙여넣으려니, 텍스트 파일이라 글자만 밋밋하게 들어가고 제 블로그 특유의 남색 제목·박스 서식이 하나도 안 살더라고요. 그래서 서식이 입혀진 초안 화면을 새 탭으로 하나 더 열어서, 거기서 전체선택(Ctrl+A)해 복사한 다음 네이버 탭에 붙여넣는 방식을 추가했어요.
3) 실제로 눌러보니 두 번째 탭이 안 열렸어요
여기서 진짜 문제가 나왔어요. 버튼 하나 눌렀는데 새 탭을 두 개(초안 화면 탭 + 네이버 글쓰기 탭) 한꺼번에 열려고 하니까, 브라우저가 두 번째 탭은 팝업으로 인식해서 조용히 막아버린 거예요. 화면에는 아무 에러도 안 뜨고 그냥 "탭이 안 열림"으로만 보였어요. 저도 처음엔 뭐가 문제인지 몰라서, 캡처 화면을 보면서 클로드와 같이 원인을 찾았어요.
구글 문서의 한국어 버전 스크린샷
// 문제가 됐던 방식: 새 탭을 두 번 엽니다
window.open(draftHtmlUrl, '_blank'); // 1번째 - 열림
window.open(naverWriteUrl, '_blank'); // 2번째 - 브라우저가 팝업으로 막음4) 새 탭은 하나만 열고, 서식 있는 내용은 클립보드로 바로 복사하는 방식으로 바꿨어요
새 탭을 여러 개 여는 대신, 네이버 새 글쓰기 탭 하나만 열고, 서식이 입혀진 초안 내용은 클립보드 API로 곧바로 복사해버리는 방식으로 바꿨어요. text/html과 text/plain을 동시에 클립보드에 담아두면, 네이버 편집기에 Ctrl+V 했을 때 서식이 그대로 살아서 붙여넣기 돼요. 별도 탭을 열어서 눈으로 확인하고 직접 복사하는 단계 자체가 사라진 거예요.
navigator.clipboard.write([
new ClipboardItem({
'text/html': new Blob([draftHtml], { type: 'text/html' }),
'text/plain': new Blob([draftText], { type: 'text/plain' })
})
]).then(function() {
alert('초안 내용을 서식 그대로 복사했어요. 네이버 탭에서 Ctrl+V로 붙여넣으세요.');
}).catch(function() {
// 클립보드 복사가 안 되는 환경이면 예전 방식(새 탭 열기)으로 되돌아가도록 예외 처리도 넣었어요.
});*브라우저는 클립보드에 쓰기 전에 한 번 물어봐요. "이 파일이(가) 클립보드에 복사된 텍스트 및 이미지 보기를 하려고 합니다"라는 확인창이 뜨는데, 여기서 "허용"을 눌러야 복사가 진행돼요.
한국어 웹사이트의 스크린샷
허용을 누르면 "초안 내용을 서식 그대로 복사했어요"라는 안내창이 떠요. 이제 네이버 탭으로 가서 본문을 클릭하고 Ctrl+V만 누르면 돼요.
실제로 네이버 편집기에 붙 여보니, 굵은 제목·회색 카테고리 표기·주황 테두리 박스까지 서식이 전부 그대로 살아서 들어갔어요.
한국사이트 스크린샷
5) 클립보드 복사가 안 되는 경우까지 대비해뒀어요
브라우저나 보안 설정에 따라 클립보드 쓰기 자체가 막힐 수도 있어서, 그럴 땐 예전 방식(서식 있는 화면을 새 탭으로 열고 직접 복사)으로 자동으로 되돌아가게 만들어뒀어요. 한 가지 방법만 믿지 않고, 안 되면 다음 방법으로 넘어가는 구조로 짰어요.
결과와 배운 점
결과: 이제 "지금 쓰기" 버튼을 누르면 초안 파일이 다운로드되고, 네이버 새 글쓰기 탭이 열리고, 서식 있는 초안 내용이 클립보드에 바로 담겨요. 탭으로 왔다 갔다 하면서 직접 복사할 필요 없이, 네이버 탭에서 Ctrl+V 한 번이면 끝나요.
배운 점: 자동화 단계를 욕심내서 하나씩 더 얹다 보면, 편의 기능(탭 여러 개 열기)이 오히려 브라우저 정책(팝업 차단)에 걸려서 아무것도 안 되는 상황을 만들 수 있다는 걸 이번에 직접 겪었어요. 조셉조님 사례글에서 "화면 캡처 도구 없이도 코드 레벨 검증이 중요하다"는 원칙을 읽었을 땐 남 얘기 같았는데, 저도 이번에 "실제로 눌러보지 않았으면 몰랐을 버그"를 하나 찾은 셈이에요.
시행착오: 처음엔 "다운로드 + 서식 있는 화면 + 네이버 탭"까지 세 가지를 한 번에 열려고 욕심을 냈는데, 그게 오히려 팝업 차단이라는 새 문제를 만들었어요. 기능을 더 넣는 게 항상 더 나은 건 아니라는 걸 다시 확인했어요.
도움이 필요한 부분: 클립보드 복사 방식이 크롬 기준으로는 잘 되는데, 다른 브라우저(사파리·엣지 등)에서도 똑같이 잘 되는지는 아직 직접 확인을 못 했어요.
앞으로 계획: "지금 쓰기" 상태인 글감부터 이 버튼으로 바로 초안을 시작해서, 실제로 발행까지 이어지는지 다음 편부터 검증해볼 예정이에요.
도움 받은 글
조셉조님이 올린 "키워드 레이더의 다섯 가지 개선" 사례글을 참고해서 제 대시보드에 검색·필터·정렬·발행완료 추적을 먼저 붙였고, 이번 편은 "버튼을 눌렀을 때 실제로 작동해서" 글쓰기 시간을 단축하고, 글감관리를 한개의 대시보드안에서 파악하려는 개선작업이었어요.
Do (해야 할 것)
버튼을 만들었으면 실제로 눌러서 끝까지 동작을 확인하기
새 탭을 여러 개 자동으로 열어야 한다면 팝업 차단 가능성부터 의심하기
한 가지 방법이 막힐 때를 대비해 대체 방법을 같이 넣기
서식이 필요한 텍스트는 일반 텍스트가 아니라 서식 있는 형태(clipboard html)로 다루기
Don't (하지 말아야 할 것)
버튼을 눈으로만 확인하고 "잘 만들었다"고 넘어가기
새 탭을 몇 개나 여는지 신경 안 쓰고 기능만 계속 얹기
클립보드·팝업처럼 브라우저 정책에 걸리는 기능을 예외 처리 없이 한 가지 방법으로만
구현하기
