최근에 어머니 회사에서 필요한 프로그램을 몇 개 만들었다.
엑셀에 있는 정보를 기반으로 출발지나 목적지, 이미지 등을 특정 포맷으로 뽑아내는 프로그램, PC에 설치된 각종 앱을 여는 버튼 등..
그리고 이번에 만든 확장 프로그램은 기존에 공백 기준의 데이터를 일일이 엑셀에서 분리하던 작업을 줄이기 위한 기능이다.
공백을 탭으로 변환해서, 버튼 한 번만 누르면 엑셀에 붙여넣을 때 바로 셀 단위로 들어가게 해준다.
이전에 확장 프로그램을 만든 적이 있어 크게 어렵지는 않았다.
처음엔 집에 있는 어머니 PC에 직접 설치했고, 그 다음엔 회사 분들 PC에도 직접 설치했다.
그런데 크롬에서는 이런 문제가 없었는데, 엣지에서는 로컬 확장 프로그램이라 그런지 자꾸 보안 관련 알림이 떴다.
또 추후에 문제 생기거나 업데이트할 일이 있을 때 일일히 다시 로컬에 설치하기엔 힘들 수 있을 것 같아 그냥 배포까지 하기로 마음먹었다.
크롬과 엣지 둘 다 되면서, 기존 사용성을 해치지 않는 선에서 기능을 조금 더하는 쪽으로.
어떤 확장 프로그램인가
구분자 변환 복사기는 클립보드에 있는 텍스트의 구분자를 바꾸고, 변환된 결과를 다시 클립보드에 복사해주는 Chrome/Edge 확장 프로그램이다.
예를 들어 아래처럼 공백으로 구분된 텍스트가 있을 때,
A B C이 값을 탭으로 바꿔서 스프레드시트에 붙여넣으면 각각 다른 셀에 들어간다.
A B C스프레드시트에서는 탭으로 구분된 텍스트를 셀 단위로 나눠서 붙여넣기 때문이다.
공백을 탭으로 바꾸는 게 기본값인데, 그 이유는 위에서 설명했듯 어머니 회사에서 사실상 저 기능 말고는 안 쓰기 때문이다 ㅎ
지원하는 구분자
GitHub 저장소에 정리해둔 것처럼 입력 구분자와 출력 구분자를 각각 선택할 수 있다.
입력: 탭, 세미콜론, 공백, 콤마, 기타 1자
출력: 탭, 세미콜론, 공백, 콤마, 제거, 기타 1자출력 쪽에는 제거 옵션도 넣었다.
예를 들어 A-B-C에서 -를 제거해서 ABC처럼 만들고 싶을 때 사용할 수 있다.
기타 구분자는 1글자만 입력할 수 있게 했다.
너무 많은 케이스를 넣기보다는, 간단한 변환 도구로 쓰는 쪽에 맞췄다.
사용 흐름
- 변환할 텍스트를 복사한다.
- 확장 프로그램 팝업을 연다.
- 입력 구분자와 출력 구분자를 고른다.
변환 후 복사버튼을 누른다.- 변환된 값이 다시 클립보드에 복사된다.
이후 원하는 곳에 그대로 붙여넣으면 된다.
구현하면서 신경 쓴 부분
공백 구분자 처리
공백 구분자는 그냥 " " 하나로만 나누면
A B C이런 값이 들어왔을 때 공백 개수에 따라 빈 값이 생길 수 있어서, trim() 후 정규식으로 나누도록 했다.
trimmed.split(/\s+/)이렇게 하면 공백이 여러 개 있어도 자연스럽게 하나의 구분자처럼 처리된다.
변환할 수 없는 상태 막기
입력 구분자와 출력 구분자가 같으면 사실 변환할 이유가 없기 때문에 같은 값을 선택하면 버튼을 비활성화했다.
기타를 선택했는데 값을 입력하지 않은 경우, 기타의 값 2개가 같은 경우도 처리했다.
마지막 설정 저장
기본값은 있지만, 한 번 적용한 옵션은 보통 계속 사용할 거라고 생각했다.
그래서 마지막으로 선택한 입력/출력 구분자를 브라우저 로컬 스토리지에 저장하도록 했다.
팝업을 다시 열어도 이전에 고른 값이 유지된다.
클립보드 권한
확장 프로그램 특성상 클립보드 권한이 필요하다.
"permissions": ["clipboardRead", "clipboardWrite"]클립보드 값을 읽고, 변환된 값을 다시 쓰는 기능이기 때문이다.
다만 이 과정은 전부 사용자 브라우저 안에서만 처리된다.
- 클립보드 텍스트는 서버로 전송하지 않는다.
- 사용자 데이터를 수집하지 않는다.
- 선택한 옵션만 로컬 스토리지에 저장한다.
주 고객층 맞춤
어머니 회사에서 사용하던 방식을 최대한 맞췄다.
이미 텍스트가 복사되어 있는 상황을 기본으로 보고, 확장 프로그램 버튼과 변환 후 복사 버튼을 누르는 두 번의 클릭으로 작업을 끝낼 수 있게 했다.
기왕이면 확장 프로그램 버튼만 눌러도 바로 변환되게 하고 싶었는데, default_popup을 쓰는 구조에서는 확장 아이콘 클릭 이벤트를 따로 받아 처리하기 어려웠다..
또한 확장 프로그램을 열자마자 바로 밑에서 변환 후 복사를 클릭할 수 있도록 옵션 선택 영역을 왼쪽에 두었다.
작업 완료 후에는 단순히 변환 완료 같은 알림을 한 번 띄우는 것보다, 탭 출력 미리보기를 보여주는 편이 어떤 복사 내용이 어떻게 다시 복사되었는지 확실히 알 수 있게 했다.
스타일
요소들의 스타일과 애니메이션은 최대한 일관되게 가져갔다.
옵션의 기타 2개를 열었을 때도 화면이 어색하게 늘어나거나 부족해 보이지 않도록 맞췄다.
프로젝트 구조
manifest.json
popup.html
popup.js
icon-excel-128.png
icons/
fonts/
screenshots/store/
docs/privacy-policy.html
dist/delimiter-copy-converter-v1.0.1.zip
PRIVACY_POLICY.md
STORE_LISTING_COPY.md
STORE_SUBMISSION.mdmanifest.json: 확장 프로그램 정보와 권한popup.html: 팝업 UIpopup.js: 변환 로직과 상태 관리PRIVACY_POLICY.md: 클립보드 읽기/쓰기 권한을 사용하는 확장 프로그램이라, 어떤 데이터를 읽고 어디까지 처리하는지 명확히 적어둘 필요가 있었다.docs/privacy-policy.html: 개인정보처리방침을 URL로 제공하기 위한 파일이다. 스토어 제출 과정에서 개인정보처리방침 URL을 요구할 수 있어서, GitHub Pages로 바로 연결할 수 있게 따로 HTML 파일도 두었다.STORE_LISTING_COPY.md: Chrome Web Store와 Microsoft Edge Add-ons에 입력할 문구를 모아둔 파일이다.STORE_SUBMISSION.md: 제출 전 체크리스트다. zip에 어떤 파일을 포함해야 하는지, 수동 테스트는 무엇을 확인해야 하는지, Chrome/Edge 제출 시 어떤 내용을 써야 하는지 정리해두었다.dist/delimiter-copy-converter-v1.0.1.zip: 실제 스토어에 제출하는 확장 프로그램 패키지다. 스토어에는 저장소 전체를 올리는 것이 아니라manifest.json,popup.html,popup.js,icons/,fonts/처럼 실행에 필요한 파일만 압축해서 제출한다.
배포 과정에서 여러 URL을 요청하는 경우가 있었는데, 이렇게 프로젝트 레포에 넣어서 GitHub Pages로 관리하니 되게 편했다.
배포 과정
이라고 썼지만 사실 따로 과정 기록은 없고, 인터넷에 나와 있는 내용을 보고 작업했다.
그나마 조언할 만한 게 있다면 크롬 웹스토어의 개발자 대시보드에 들어가 처음 개발자 등록을 하고 게시한다.
(사용자가 어느새 6이다..!!)
처음 신청하고 게시까지 한 5일? 6일? 잘 기억은 안 나는데, 인터넷에 나온 시간보다 조금 더 오래 걸려서 괜히 불안했다.
프로그램 자체가 엄청 간단하고 개인정보를 들고 있는 것도 없어서 무조건 될 것 같긴 했다.
그래도 설마 안 되면 어쩌지, 뭐 빼먹었으면 어쩌지 하고..
이건 업로드 완료하고 수정할 수 있는 내용인데, 왼쪽의 요소처럼 들어가는 건 비슷하다.
패키지 넣고 등록 정보 넣고 등등
이건 나도 처음 봤는데 내 생일날 무슨 일이 있었길래 갑자기 사용자가..
마무리
설치는 Chrome Web Store에서 할 수 있다.
코드는 GitHub에 올려두었다.
