[회고록] 글자수세기 네이버 웨일 스토어 사이드바 확장프로그램 확장앱 제작

만든 계기

웨일 스토어 글자수 시기 사이드 확장 프로그램 링크

웨일 브라우저 자주 사용한다ㅎㅎ(사이드 앱, 모바일 투명화 최고). 책 리뷰 글자수가 공미포 250자가 넘어야 했는데 디자인이 마음에 드는 글자수 세기 확장 프로그램 없더라.사이드 프로젝트 주제 찾을 때라서 친구랑 같이 직접 만들기로 했다.

디자인부터 시작하기

일단 기존 글자수 세기 사이트 래퍼런스 조사하고, 각자 디자인 해왔다. 팀원 한 명이 최대한 네이버 브라우저의 사이드바라서 네이버 느낌에 묻어가자고 했다. 그 점에 모두 동의해서 초록색 계열로 진행했다.

작은 기능을 나누는 게 더 힘들구나

여태껏 개인 프로젝트만 해와서 팀프로젝트를 하고 싶다는 생각으로 시작한 프로젝트였다. 문제는 너무 간단한 기능만 필요해서 역할을 나누기가 민망했다. 그래도 팀 프로젝트니까 기능을 나눠서 작업하기로 했다.

한 파일을 두 명이서 작업하면 오류가 자주 날 것 같았다. 각각 따른 js 파일에 기능을 구현한 뒤 한 번에 합치는 방식으로 진행했다.

몇 없는 기능은 크게 2가지로 나누고 역할 분배했다. 하나는 글자수세기. 공백포함과 공백제거 모두 포함한다. 다른 하나는 전체복사와 전체지우기. 내가 이 기능을 맡았다.

전체 복사 지우기 기능 구현하기

const btn_copy = document.querySelector("#btn_copy");
const btn_remove = document.querySelector("#btn_remove");

btn_copy.onclick = () => {
  tbox.select();
  document.execCommand("copy");
};

btn_remove.onclick = () => {
  if (tbox.value.length > 0) {
    tbox.value = "";
    letters.textContent = "0";
    byte.textContent = "0";
    trim_letters.textContent = "0";
    trim_byte.textContent = "0";
  }
};

복사 기능 구현하기 위해 사용할 수 있는 방법은 두 가지였다. execCommand() 이나 **Clipboard API**를 사용하는 것. Clipboard 는 execCommand()를 대체하기 위해 등장했다. 최신 스펙이라 지원하지 않는 브라우저도 많아 execCommand()를 선택했다. (그러나 추후에 다시 clipborad API로 교체했다.)

처음으로 Github 같이 써보다!

혼자 main branch에서 작업하다가 처음으로 develop를 하나 더 만들었다...! cherry pick, revert... 등등 내가 안 써본 기능이 많았다. 처음이라 엉성해서 develop가 아니라 자꾸 main에 commit하기도 하고 😅 우당탕탕 엉성하기 짝이 없었는데, 팀원이 많이 이해해줬다(미안...)

배포과정과 시행착오

폴더구조

처음에 디버깅 하는 방법을 몰라서 웨일 스토어에 바보같이 미등록으로 업로드하고 2~3일을 기다렸다. 나중에서야 디버깅 하는 방법을 알게되고, 그 뒤로는 로컬에서 테스트 해보고 배포했다.

폴더 구조는 이렇게. 다른 건 다 쉬웠는데 locales와 manifest가 어색했다. 인터넷에 예제를 찾아보고 넣어봤다.

manifest.json

{
  "manifest_version": 2,
  "name": "글자수 세기",
  "version": "1.0.1",
  "description": "글자수를 세주는 사이드 앱",
  "icons": { "32": "favicon-32x32.png" },
  "default_locale": "ko",
  "sidebar_action": {
    "default_page": "./index.html",
    "default_icon": {
      "32": "favicon-32x32.png"
    },
    "default_title": "글자수 세기",
    "use_navigation_bar": false
  }
}

mainfest에 대한 가이드는 웨일 개발자센터에서 제공한다. 아이콘 여러개 넣고 싶지 않아 32x32 하나만 넣었더니 hover 했을 때 이미지가 깨지는 현상이 생겼다. 크기 여러개 넣어야 해야할 것 같다.

다른 것보다 default locale가 복병이었다. 사실 우리 앱에는 필요 없는 설정이었다. 다국어 설정시 필요한 옵션이라 안 적어도 됐다. 그때는 이 사실을 모르고 개발자 문서에 있는 manifest를 똑같이 복사 붙여넣기 했다.

locales/ko/messages.json

{
  "name": {
    "message": "글자수세기",
    "description": "Name of the Counting letters."
  },
  "description": {
    "message": "글자수 세기 확장앱 입니다. 공백 포함, 미포함 된 글자수를 셉니다. 한글은 2자, 영어는 1자, 개행은 카운트하지 않습니다.",
    "description": "Short description of the Counting letters App."
  }
}

locales는 사용자 인터페이스에서 사용되는 언어, 지역 설정, 출력 형식 등을 정의하는 문자열이다. manifest.json 에서 default_locale 를 설정해서 추가적으로 필요했다.

개발자 등록하고 심사받기

첫 심사는 2~3일 정도가 걸린다. 처음에 locales 폴더 빼먹고 압축하느라 실행되지 않는데도 합격됐다...! 당황해서 곧바로 삭제하고 다시 올렸다. 다시 2~3일 뒤 업로드 완료!

이후에 어플리케이션 설명을 변경하기 위해서 본문 내용만 재심사 신청했다. 재심사는 시간이 꽤 걸렸다. 거의 7일 정도가 소요됐다.

220317일 현재 다운로드 한 사람이 꽤 된다...! 😊

 

웹 접근성 수정하여 재배포하기

파이어 폭스로 검사하니 포커스 스타일과 텍스트 레이블 두 가지 오류가 떴다.

웹 접근성을 위해 포커스 스타일 설정하기

마우스로 할 수 있는 동작들은 모두 키보드만으로도 할 수 있어야 한다.

상호작용이 가능한 요소(<input>, <a>) 는 tab 으로 포커스가 되어야한다. 대부분 태그만 제대로 쓰면 포커스가 안되는 일이 없다. 물론 포커스만 된다고 해결되지 않는다. 현재 포커스 한 요소의 위치를 시각적으로 나타내줘야한다.

보통은 브라우저마다 포커스링 (focus ring)이 존재하는데 미관상 이유로 outline:none, outline:0 값을 주어 숨기는 경우가 종종 있다. (내가 그랬다 😅) 어떠한 이유로 ouline을 제거 한 상태에서도 접근성만 높이는 방법이 또 있다!

바로:focus-visible ****을 사용하는 것. 요소가 일치하는 동안 가상의 클래스를 제공해주는 선택자이다. :focus 와 다르게 마우스나 터치에서는 값이 적용되지 않고 오직 키보드 포커스 할 때만 적용된다.

문제는 이게 웨일에서도 작동하는지가 문제였다. 웨일은 크롬 엔진 크로미움을 기반으로 한 여러가지 오픈 소스 기반으로 제작됐다. 크롬 같은 경우는 86버전 이상부터 작동했다.

웨일이 사용하는 크로미움의 정확한 버전을 알고 싶어서 whale://version 치고 들어가서 확인했다. 크롬 98이면 넉넉했고 :focus-visible 사용하는 데 문제가 없었다. 해당 선택자를 css에 입력했고 문제를 해결할 수 있었다.

웹접근성을 위해 텍스트 레이블 설정하기 

상호작용이 되는 요소에는 이에 대응하는 텍스트가 존재해야한다.

텍스트 레이블이 필요한 이유는 스크린리더 같은 통신기기는 label 태그를 통해서만 input 태그를 인식하기 때문이다. 스크린리더란 시각장애인을 위한 도구로 컴퓨터 화면 낭독 소프트웨어이다.

화면에 뜬 텍스트 레이블 오류가 생긴 곳은 총 두 개였다. 새창으로 보기 <a> ,글자수를 입력받는 <textarea> . 마우스를 올리면 아래와 같은 형태로 대화형 요소에 레이블을 지정해야 한다고 떴다.

레이블을 제공하기 위해서는 두 가지 방법이 있다.<label> 태그나 title 속성을 사용하면 된다.

<label> 태그는 각 폼 서식의 연관 관계와 설명을 추가하는 역할을 한다. <label>요소를 사용할 수 있는 폼 태그는 button, input, keygen, meter, output, progress, select, textarea 가 있다. 사용 문법은 input 태그에서 id속성으로 이름을 선언하고, <label>에서 for 속성으로 해당 아이디와 연결해주면 된다. 나는 암묵적인 방법을 사용했다😊

<--명시적--> 
<label for="userPw">비밀번호</label> 
<input type="password" id="userPw"> 

<--암묵적--> 
<label for="userPw">
	비밀번호 <input type="password" id="userPw"> 
</label>

사용법은 크게 두 가지가 있다. 명시적인 방법과 암묵적인 방법이다. 명시적인 방법은 위에서 설명한 id값과 for값을 연결 시키는 것이고, 암묵적인 방법은 <label>태그 안에 폼 서식을 넣는 것이다.

title 속성 <a> 태그 같은 경우는 <label> 태그와 연결할 수 없다. 이럴 때는 title 속성을 사용해주면 된다.

디자인

개인적인 욕심으로 디자인까지 수정했다. 디자인은 계속 만지고 시간을 들이면 들일 수록 결과물이 좋은 것 같다. 물론 그 과정은 고통스럽지만.

• byte의 크기를 줄이고 글자수만 키웠다. 보통은 바이트가 아니라 글자수만 확인한다.
• 글자수 옆에 “자”를 추가했다. 혼자만 단위가 없으니까 어색했다.
• 글자수와 byte를 우측 정렬했다. 숫자가 바뀔 때마다 뒤에 있는 단위까지 꿀렁거려서 불안정했다.
• 로고에 과한 bold값을 제거했다. 구색만 맞추려고 넣은 헤더에 로고인데 지나치게 강조해보였다.
• 적당한 padding 값을 넣었다. 확인해보니까 제대로 padding값 넣은 곳이 없어서 넉넉하게 부여했다.

여전히 뭔가 불안한 느낌이 들지만 정확히 뭔지 모르겠다. 이전이 나은 것 같기도 하고 역시 디자인은 어렵다.

후기

첫 팀프로젝트...! 확실히 간단한 프로젝트더라도 개인보다 팀으로 하는게 훨씬 더 공부가 많이 됐다. (git, 변수선언, 주석방식, 커밋메세지) 사용자도 생각보다 많고 뿌듯했다😊

충격받은 건 수정할 때 분명 내가 작성한 코드인데 안 읽히고 누가 이렇게짰지? 싶었다. 그만큼 발전했다는 거겠지...? 남에게 더 잘 읽히는 코드를 작성해야겠다.

---

참고링크

[퀵숙] 웨일 확장앱 만들어본 후기(+ 크롬 익스텐션)

웹 접근성 인증 받는 방법과 후기

NULI