그누보드5 스마트에디터2 툴바 아이콘 SVG 교체 및 UI 개선 방법

• 목록
• 스크랩

그누보드5 스마트에디터2 툴바 아이콘 SVG 교체 및 UI 개선 방법

그누보드5 스마트에디터2의 기본 비트맵(PNG) 아이콘이 고해상도 디스플레이에서 찌그러져 보이는 문제를 해결하기 위해, SVG 리소스를 업로드하고 CSS 경로를 수정하여 선명한 UI로 개선하는 방법을 안내합니다.

스마트에디터2 툴바 아이콘 SVG 파일 업로드 경로

그누보드5 스마트에디터2의 기존 PNG 아이콘을 고해상도 SVG 아이콘으로 교체하기 위해 파일을 업로드할 서버의 경로명은 다음과 같다.

• SVG 파일 FTP 업로드 경로: /plugin/editor/smarteditor2/img/ko_KR/

아이콘 교체를 위한 다음 단계

1. 준비한 SVG 파일을 위 경로에 업로드한다.
2. CSS 파일 수정 경로인 /plugin/editor/smarteditor2/css/ko_KR/smart_editor2.css에 접속한다.
3. #smart_editor2.se2_text_tool button, #smart_editor2.se2_multy.se2_icon 선택자 항목을 찾은 뒤 이미지 경로의 확장자를 .png에서 .svg로 변경한다.

스마트에디터2 툴바 아이콘 CSS 파일 수정 경로 및 선택자

그누보드 스마트에디터2의 기존 PNG 아이콘 경로를 SVG로 변경하기 위해 수정해야 할 CSS 파일의 위치와 선택자 항목은 다음과 같습니다.

CSS 수정 경로 및 선택자

• 수정 파일: /plugin/editor/smarteditor2/css/ko_KR/smart_editor2.css
• 수정 대상: #smart_editor2.se2_text_tool button, #smart_editor2.se2_multy.se2_icon 선택자의 background 속성 내 이미지 경로 확장자를 .png에서 .svg로 변경합니다.

스마트에디터2 툴바 아이콘 SVG 교체 및 경로 수정 방법

그누보드5의 스마트에디터2 툴바에 사용되는 기존 PNG 비트맵 아이콘의 화질 저하 및 찌글거림을 개선하기 위해 고해상도 SVG 아이콘으로 교체하는 방법입니다.

1. SVG 파일 업로드 경로

준비한 SVG 아이콘 파일은 서버의 다음 FTP 경로에 업로드합니다.

• 업로드 경로: /plugin/editor/smarteditor2/img/ko_KR/

2. CSS 파일 수정 방법

기존 .png 확장자로 설정되어 있는 스타일과 경로를 변경하기 위해 아래의 CSS 파일을 수정합니다.

• 수정할 파일 경로: /plugin/editor/smarteditor2/css/ko_KR/smart_editor2.css
• 수정 대상 선택자 예시:
  • #smart_editor2.se2_text_tool button
  • #smart_editor2.se2_multy.se2_icon

3. SVG 파일 준비 시 유의사항

본 가이드에는 실제 SVG 파일이 포함되어 있지 않습니다. 기존 PNG 아이콘의 크기와 형태를 참고하여 벡터 변환 도구(Adobe Illustrator, Inkscape 등)를 사용해 직접 제작하는 것을 권장합니다.

스마트에디터2 툴바 아이콘 SVG 교체 및 반영 확인 방법

그누보드5의 스마트에디터2에서 비트맵 이미지(PNG)로 된 툴바 아이콘을 고해상도 SVG 아이콘으로 교체하려면 파일 업로드와 CSS 수정 과정을 거쳐야 합니다.

1. 파일 업로드 및 CSS 수정

파일 업로드 경로(/plugin/editor/smarteditor2/img/ko_KR/)와 CSS 수정 방법은 앞선 Q1, Q2의 안내를 참고하십시오.

3. 수정 후 변경 사항이 즉시 반영되지 않을 때

코드 수정 후에도 에디터 화면에 변경된 아이콘이 즉시 반영되지 않는다면 브라우저 캐시를 삭제한 뒤 게시판 글쓰기 화면에서 에디터가 정상적으로 로드되는지 확인해야 합니다.

스마트에디터2 툴바 아이콘 SVG 교체

• 내 상황: 기존 PNG 아이콘의 낮은 화질(찌글거림)을 개선하여 고해상도 SVG로 교체하려는 경우
• 선택 기준: 서버 FTP 접근 권한이 있고 스마트에디터2 플러그인 파일 수정이 가능한 경우
• 다음 행동:
  1. 준비한 SVG 파일을 /plugin/editor/smarteditor2/img/ko_KR/ 경로에 업로드합니다.
  2. /plugin/editor/smarteditor2/css/ko_KR/smart_editor2.css 파일 내 #smart_editor2.se2_text_tool button 및 #smart_editor2.se2_multy.se2_icon 선택자의 이미지 경로 확장자를 .png에서 .svg로 변경합니다.
  3. 수정 후 변경 사항이 반영되지 않으면 브라우저 캐시를 삭제하고 확인합니다.

실전 FAQ

Q. SVG로 교체 후에도 아이콘이 변경되지 않습니다.

• 원인: 브라우저가 이전 CSS나 이미지 파일을 캐싱하고 있을 가능성이 높습니다.
• 대안: 브라우저 캐시를 삭제하거나, 개발자 도구(F12)의 네트워크 탭에서 '캐시 사용 중지(Disable cache)'를 체크한 후 페이지를 새로고침하여 확인하십시오.

Q. SVG 파일은 어디서 구하나요?

• 참고: 본 가이드에는 실제 SVG 파일이 포함되어 있지 않습니다. 기존 PNG 아이콘의 크기와 형태를 참고하여 벡터 변환 도구(Adobe Illustrator, Inkscape 등)를 사용해 직접 제작해야 합니다.

함께 보면 좋은 글

• 그누보드 스마트에디터 툴바 아이콘 삭제 시 레이아웃 오류 해결 방법
• 스마트에디터2 줄바꿈 시 P 태그 대신 BR 태그 적용하기
• 스마트에디터2에서 유튜브 및 외부 동영상 삽입하는 방법

참고자료

기타 참고자료

• sir.kr — 그누5 스마트에디터2 툴바아이콘.svg - SIR - 개발자 커뮤니티
• mercury-seed.com — 그누보드 스마트에디터 툴바 아이콘 삭제 시 레이아웃 오류 해결 방법 | 데빈포 : 그누보드 포럼
• gnustudy.com — 스마트에디터 툴바 아이콘 삭제하는 방법 - 그누보드팁