네이버 에디터 버튼 사용법

자동화에서 확인한 SmartEditor 버튼별 동작 흐름과 주의사항입니다.

작업실 열기

핵심 원칙

버튼 자동화가 흔들리지 않게 유지하는 기준입니다.

1

SmartEditor에는 raw markdown을 붙여넣지 않고 StructuredPost.blocks를 블록 단위로 실행합니다.

2

일반 textContent 직접 변경보다 Chrome debugger Input.insertText가 안정적입니다.

3

toolbar 상태가 다음 문단으로 이어질 수 있으므로 폰트, 색상, 정렬은 블록마다 명시합니다.

4

toolbar와 옵션 클릭은 한 번만 보냅니다. element.click과 mouse event를 동시에 보내면 중복 삽입될 수 있습니다.

5

이미지와 동영상은 file chooser interception으로 처리하고, 링크는 검색/확인까지 완료해야 합니다.

6

실제 발행은 별도 확인 토큰이 있을 때만 수행합니다.

상단 삽입 도구

확인된 selector와 자동화 흐름입니다.

동영상toolbar 동영상 버튼
흐름
버튼 클릭 -> 동영상 업로드 모달 -> 동영상 추가 -> 파일 주입 -> 업로드 완료 대기 -> 제목 입력 -> 완료
주의
파일 선택창은 debugger file chooser interception으로 처리합니다. 업로드 완료 전 완료 버튼을 누르면 실패합니다.
스티커button[data-name="sticker"]
흐름
스티커 버튼 클릭 -> 스티커 패널 대기 -> 상황별 pack/index 선택 -> 패널 닫기 -> 본문 포커스 복귀
주의
purpose/mood를 남겨두고 현재 스티커 세트의 index로 해석합니다. 중복 클릭하면 같은 스티커가 두 번 들어갈 수 있습니다.
인용구인용구 선택 버튼
흐름
인용구 선택 -> 인용구 N 옵션 클릭 -> 생성된 인용구 paragraph 입력 -> 본문 추가 또는 아래 좌표 클릭으로 탈출
주의
인용구 추가 버튼부터 누르면 빈 기본 인용구가 생길 수 있습니다. toolbar/옵션 클릭은 한 번만 보냅니다.
구분선구분선 toolbar
흐름
구분선 버튼 클릭 -> 스타일 번호 선택 -> 다음 본문 입력 위치 확보
주의
글 블록에서는 divider style 값으로 관리합니다.
링크링크 toolbar
흐름
링크 버튼 클릭 -> URL 입력 -> 돋보기 검색 -> OG 정보 로드 대기 -> 확인 클릭
주의
URL 입력만으로 끝나지 않습니다. dilling.kr OG 카드 삽입은 확인했습니다.
파일파일 toolbar
흐름
파일 버튼 클릭 -> file chooser interception -> 파일 경로 주입 -> 업로드 상태 확인
주의
이미지/동영상과 달리 문서 첨부 블록으로 들어가므로 별도 검증이 필요합니다.
일정일정 toolbar
흐름
일정 버튼 클릭 -> 날짜/시간 정보 입력 또는 선택 -> 삽입 완료
주의
예약 발행의 날짜/시간과는 다른 본문 일정 블록입니다.
소스코드소스코드 toolbar
흐름
소스코드 버튼 클릭 -> 코드/언어 입력 -> 확인
주의
일반 블로그 글에서는 사용 빈도가 낮아 자동 생성기에서 명시 요청이 있을 때만 사용합니다.
표 toolbar
흐름
표 버튼 클릭 -> 행/열 선택 -> 각 cell 입력
주의
가격 비교, 기능 비교, 체크리스트형 글에 적합합니다.
수식수식 toolbar
흐름
수식 버튼 클릭 -> 수식 입력 -> 삽입
주의
일반 매장 마케팅 글에서는 기본 사용하지 않습니다.
장소장소 toolbar
흐름
장소 버튼 클릭 -> 장소 검색 -> 결과 선택 -> 삽입
주의
매장 위치 홍보 글에서는 매장 프로필의 주소 데이터와 연동해야 합니다.
내돈내산내돈내산 toolbar
흐름
버튼 클릭 -> 관련 설정 확인 -> 본문 블록 삽입
주의
광고/협찬/후기 성격과 연결되므로 매장 정책에 맞춰 사용합니다.
글감글감 toolbar
흐름
글감 버튼 클릭 -> 소스 선택 -> 필요한 자료 삽입
주의
자동화에서는 외부 자료 소스가 명확할 때만 사용합니다.

텍스트 서식

확인된 selector와 자동화 흐름입니다.

폰트button[data-name="font-family"]
흐름
텍스트 블록 입력 전 font-family 버튼 클릭 -> font option 선택 -> 입력
주의
확인한 값: system, nanumgothic, nanummyeongjo, nanumbarungothic, nanumsquare, nanummaruburi 등
글자 크기font size control
흐름
입력 전 크기 control 선택 -> 크기 값 선택 -> 입력
주의
제목/소제목/본문 크기가 섞이지 않도록 블록마다 초기화하는 것이 안정적입니다.
굵게bold button
흐름
입력 전 bold 상태 적용 또는 선택 영역에 적용
주의
highlight 블록은 기본 bold를 적용합니다.
기울임italic button
흐름
선택 영역 또는 다음 입력 상태에 italic 적용
주의
일반 마케팅 글에서는 과하게 쓰지 않습니다.
밑줄underline button
흐름
중요 문장 선택 또는 다음 입력 상태에 underline 적용
주의
링크처럼 보일 수 있어 CTA 문구 외에는 제한적으로 사용합니다.
취소선strike button
흐름
가격 비교나 전후 비교 문장에 선택 적용
주의
가격/혜택 글에서만 상황에 맞게 사용합니다.
글자색button[data-name="font-color"]
흐름
font-color 버튼 클릭 -> palette에서 hex/title 매칭 -> 입력
주의
기본 alias: black, red, orange, yellow, green, blue, purple, pink. 색상 상태 누수를 막기 위해 블록마다 적용합니다.
정렬button[data-name="align-drop-down-with-justify"]
흐름
정렬 드롭다운 클릭 -> data-value left/center/right/justify 선택 -> 입력
주의
라벨보다 data-value가 안정적입니다. 태그 입력 전에는 left/nanumgothic/black으로 리셋합니다.
목록list toolbar
흐름
목록 버튼 클릭 -> 항목 입력 -> Enter로 다음 항목 또는 목록 탈출
주의
체크리스트/FAQ 글에서 사용합니다.
번역번역 toolbar
흐름
텍스트 선택 -> 번역 버튼 -> 결과 확인
주의
자동 발행 본문 생성에서는 기본 사용하지 않고 검수 도구로 분류합니다.
맞춤법맞춤법 toolbar
흐름
본문 작성 후 맞춤법 버튼 클릭 -> 제안 확인
주의
최종 발행 전 검수 단계로 자동화할 수 있습니다.

미디어와 발행

확인된 selector와 자동화 흐름입니다.

이미지image toolbar
흐름
API가 remote image를 temp file로 저장 -> image 버튼 클릭 -> file chooser interception -> DOM.setFileInputFiles
주의
파일 선택창 없이 자동 업로드 확인했습니다.
발행 설정button.publish_btn__m9KHH
흐름
발행 버튼 클릭 -> 공개 범위/댓글/공감/검색/카테고리/예약 시간 설정 -> 필요 시 최종 발행
주의
실제 발행은 autoPublish=true와 publishConfirmToken=PUBLISH_NAVER_NOW가 모두 있을 때만 누릅니다.
카테고리publish panel category controls
흐름
발행 패널 열기 -> 카테고리 목록 수집 -> categoryKeywords와 가장 맞는 항목 선택
주의
카테고리 자동 탐색은 매장별 기본 카테고리와 키워드를 함께 사용합니다.
예약 발행publish timing controls
흐름
발행 패널 열기 -> 예약 선택 -> 날짜/시간 입력 -> 최종 발행
주의
Inspect Schedule은 설정까지만 하고 최종 발행 버튼은 누르지 않는 안전 테스트입니다.