[회고록] 크롬 확장프로그램 제작 후기

 

https://chrome.google.com/webstore/detail/오늘-전장/eohfbgfljglffaofibdphglklbeffkig?hl=ko&authuser=0

파이널판타지14 온라인 pvp 컨텐츠 중 전장은 매일 종류가 바뀝니다. 전장 종류는 제압, 봉바, 쇄빙, 온살으로 총 4가지이고 적힌 순서대로 컨텐츠가 교체됩니다. 오늘 순서인 전장을 인게임 밖에서는 확인 할 방법은 없습니다. 이를 해결하기 위해서 만든 확장프로그램입니다.

[기획] 왜 만들었나요?

이 게임에는 전장 이라는 컨텐츠가 있다. 전장은 제압, 봉바, 쇄빙, 온살 총 4가지 맵이 존재한다. 이 맵은 고정된 순서로 24시간에 한 번씩 바뀐다. 문제는 게임에 접속하지 않고 오늘 순서인 전장을 확인할 방법이 없다. 이걸 해결하기 위해서 프로젝트를 진행했다.

[기획]사실 이전에 비슷한 사이트 만든 적 있다.

사실 2021년 10월에 비슷한 목적으로 웹사이트를 제작했다. 리액트로 처음 배우고 진행한 프로젝트였다. 그 때 당시 내 눈에 결과물이 나쁘지 않았다. 문제는 접속자가 하루에 2~3명 정도로 너무 적었다.

개인적으로 생각한 문제점 1. 접근성이 부족하다. 이 사이트는 구글에 검색해도 나오지 않는다. 그때는 SEO 설정하고 구글 서치 콘솔만 적용하면 사이트가 등록되는 줄 알았다. sitemap.xml 이나 robot.txt은 몰랐다. 링크를 타고 들어온 사람은 게임 커뮤니티 사이트에 홍보된 글을 타고 들어왔다. 당연히 신규 접속자가 적을 수 밖에 없었다.

문제점 2. 처음 사이트에 들어왔을 때 오늘 전장이 무엇인지 정확히 보이지 않는다. 오늘 전장이라는 이름이 무색할 정도다. 오늘 날짜는 달력 배경색이 변하도록 했는데 파스텔톤이라서 눈에 띄지 않는다. 또 이름을 표시한 상자도 색이 알록달록해서 통일성이 없고 텍스트와 대비가 확실하지 않다.

문제점 3. 세 번째 사용성이 떨어진다. 검색 되지 않기때문에 사용자가 사이트를 즐겨찾기 추가하거나 URL을 외워야한다. 두 방법 모두 번거롭기 때문에 선뜻하지 않을 것 같았다.

해결 방법 1. 크롬 확장 프로그램으로 등록하기. SEO를 위해 따로 처리하지 않아도 검색 엔진에 등록되고, 매번 사이트에 접속하지 않으니 사용성도 훨씬 좋아진다.

해결 방법 2. 한달 전장 일정이 아니라 오늘 전장만 나오도록 하기. 한달 달력이 모두 나오면 UI적으로 복잡해질 수 밖에 없다. 다른 요소는 제외하고 오늘의 전장이 무엇인지만 나타내면 확장 프로그램적으로도 어울리고 유저 입장에서 더 편할 거라 예상했다.

[제작과정] 4일 주기로 반복되는 일정 로직으로 표현하기

let 오늘전장 = ""
		const today = moment()
		const getFrontline = () => {
			const defalutDay = moment('2022-03-16')
			
			let data = today.diff(defalutDay,'days') % 4
			switch (data) {
				case 0:
					오늘전장 = "제압"
					break;
			
				case 1:
					오늘전장 = "봉바"
					break;

				case 2:
					오늘전장 = "쇄빙"
					break;

				case 3:
					오늘전장 = "온살"
					break;

				default:
					break;
			}
			return 오늘전장
		}
		getFrontline()
		document.querySelector("#frontline").innerText = 오늘전장
		document.querySelector("#date").innerText = today.format('YYYY년 MM월 D일')

4일 주기로 반복되는 걸 나타내야 할지가 문제였다. 구글에 “자바스크립트 주기” “자바스크립트 4일주기” 이런 식으로 검색해도 date() 메서드 사용방법만 나오지 스스로 납득할만한 로직이 나오지 않았다. 아무래도 상용 서비스나 프로그램에서는 딱히 쓸 일이 없는 로직이라서 그런 것 같다.

혼자 멘사 퀴즈처럼 365 x 4 한 다음에 어떻게 나누면 뭔가 로직이 나오지 않을까, 하고 여러모로 식을 짜봤는데 음... 너무 복잡했다.

차라리 프로그래밍적이 아니라 인간적으로 접근하기로 했다. 4일 주기로 반복되니까 4일 뒤에는 똑같은 맵이 걸린다. 4일뒤 걸리는 맵과 8일 뒤 걸리는 맵이 똑같다. 특정일 기준으로 지난 날을 4로 나눈 나머지가 결국 맵의 순서다!

[제작과정] 디버깅하는 방법

주소창에 chrome://extensions/ 을 입력하고 개발자 모드를 켜준다.

그럼 해당 버튼이 UI가 등장한다. 압축 해제된 확장프로그램을 로드한다. 이건 말그대로 압축되지 않은 확장 프로그램을 가져온다. 확장 프로그램 압축은 zip으로 압축된 파일을 가져온다. 업데이트는 해당 확장 프로그램 폴더에 변동사항이 있으면 디버깅 프로그램에 반영해준다.

[제작과정] manifest.json V3

//manifest.json

{
  "name": "오늘 전장",
  "description": "파이널판타지14 pvp 전장 일정을 알려줍니다.",
  "version": "1.0.1",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/favicon-16x16.png",
      "32": "/images/favicon-32x32.png",
      "96": "/images/favicon-96x96.png"
    }
  },
  "icons": {
		"16": "/images/favicon-16x16.png",
		"32": "/images/favicon-32x32.png",
		"96": "/images/favicon-96x96.png"
  }
}

이전에 V2로 확장프로그램을 배포한 적이 있다. 그때 사용했던 manifest.json 을 그대로 사용하려했더니 V3를 사용하라고 권장 메세지가 계속 떴다. 결국 구글의 권유에따라 변경하기로 했다.

내가 작성한 manifest.json 은 위와 같다. CORS 요청하는 백엔드와 연동된 프로그램이 아니라서 딱히 적을 내용이 없었다. browser_action이 action으로 바뀐 부분외에 이전에 진행했던 V2 문법과 똑같이 진행했다.

 

Welcome to Manifest V3 - Chrome Developers

[제작과정] 계속 뜨던 오류

제대로 안 읽어보고 manifest.json 상의 오류인 줄 알고 계속 저 Content Security Policy를 지키기 위한 설정법을 찾아서 계속 헤맸다.

결론적으로는 위와 같이 자바스크립트를 html에서 스크립트 태그 안에 직접적으로 쓰면 생기는 오류였다. script 안에 있던 로직을 main.js 파일을 만들어서 분리해주니 바로 해결됐다.

[배포] 심사 과정

심사는 대충 6시간이 걸렸다. 아침 12시에 신청했더니 오후 6시에 답이 왔다. 근데 거절당했다.

사유는 manifest에 있는 설명과 어플리케이션 페이지에 설명이 똑같아서. 무지성으로 그저 복사 붙여넣기하면 안된다고 한다. 정성스럽게 3~4줄의 설명을 적고나니 한 10분 뒤 바로 승인 받았다!

[업데이트] 처음 받아본 요청 사항

12시가 지나고 매칭 넣었는데 난입으로 다른 전장 끌려갔어요 이 내용도 추가해주세요ㅠㅠ

사실 위의 요구사항은 프로그램 상의 문제가 아니였다. 원래 게임 내의 시스템이 그렇다. 게임사에서 알려주지 않아서 뉴비들은 잘 모르지만 게임 많이한 사람은 아는 내용이다.

이 프로그램을 제작한 목적은 일정 제공이다. 여기에 뉴비를 위한 팁을 확장 프로그램 내에서 알려주는 것이 맞나, 하는 의문이 잠시 들었다.

알려준다면 어떤 방식으로 제공해야 하는지, 위의 요구사항 한 줄만 적어줄 것인지, 아니면 뉴비들이 모를 법한 모든 팁을 알려줄 것인지 여러가지 고민에 빠졌다.

결론적으로 개인 블로그에 매칭 관련 팁을 모두 적고, 해당 링크를 버튼에 연결하는 방식을 선택했다.

확장 프로그램 안에 팁 내용을 직접 적는 건 TMI다. 매칭에 관련된 팁은 뉴비여도 사실 한 번만 알게 되면 이후로 확인할 필요 없는 일회성 정보다. 따로 링크를 걸어두고 확인하고 싶은 사람만 확인하는 것이 낫다고 생각했다.

[업데이트] UI 변경 - tailwind 적용

1.0.1 버전

1.0.4 버전

UI & UX

이전 디자인에서 해결해야하는 점은 세가지였다.

1. 당일 전장만 알아서 12시가 지난 이후의 전장을 알기 힘든점 → 내일 전장도 표기하고, 전장 순서까지 표시하여 사용자가 나중 전장도 예측 가능하도록
2. 미적으로 아름답지 않은 점 → tailwind를 사용하여 해결하기
3. 뉴비가 알기 어려운 사소한 팁도 추가해달라는 요구사항 → 팁보기 버튼을 생성해서 블로그로 연결시키기

Tailiwnd

처음 cdn 방식으로 tailwind를 사용하니 콘솔 로그에 권장하지 않는 방법이라고 경고문이 떴다. npm 방식을 사용하라고 했다. 방식을 변경하면서 이때 처음으로 build라는 개념을 이해했다.

src/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

위와 같은 css 파일을 작성한 뒤 npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch 명령어를 실행하면

이러한 css 파일이 생성된다. 모든 클래스명을 미리 만들어두지 않고 유저가 그 클래스를 사용하면 css에 따로 추가하는 방식이다. 예를 들면 내가 <div class=”mb-4”> 라는 엘리먼트를 생성하면 그제서야 output.css 에 .mb-4 { margin-bottom: 1rem; } 라는 css가 생성된다.

[업데이트] 리팩터링

const frontlineList = ["제압", "봉바", "쇄빙", "온살"]

const getFLturn = (firstDay, secondDay) => {
	return FLtrun = Math.abs(secondDay.diff(firstDay,'days') % frontlineList.length)
}

const getTodayturn = () => {
	const today = moment()
	const defalutDay = moment('2022-03-16')
	return getFLturn(today,defalutDay)
}

const getTomorrowTrun = (todayTurn) => {
	let tomorrowTurn = todayTurn + 1
	tomorrowTurn > frontlineList.length - 1 && (tomorrowTurn = 0)
	return tomorrowTurn
}

const getFLName = (int) => {
	return frontlineList[int]
}

const init = () => {
	const todayTurn = getTodayturn()
	const tomorrowTurn = getTomorrowTrun(todayTurn)

	document.querySelector("#todayFL").textContent = getFLName(todayTurn)
	document.querySelector("#tomorrowFL").textContent = getFLName(tomorrowTurn)
	document.querySelector("#date").textContent = today.format('MM월 DD일')
}
init();

이전에 작성한 코드는 작동하는 데 문제는 없었다. 하지만 innerText, switch, 상수를 굳이 let으로 선언 등등 마음에 들지 않는 것 투성이었다. 어차피 코드 길이도 길지 않아서 빠르게 리팩토링을 진행했다. 이전에 getFL이라고 하나로 뭉뚱그린 함수가 4개로 분리됐다.

• 날짜를 비교하여 순서를 구하는 함수
• 오늘의 순서를 구하는 함수
• 내일의 순서를 구하는 함수
• 순서를 이름으로 변환해주는 함수

[후기] 반응 구경하기

당연히 공짜로 배포했으니 반응은 좋았다. 다운로드 수는 한 100명 정도 예상했고 결과도 비슷했다. 애초에 이 게임 사용자 수가 적은 편이다.

후기가 몇 개 올라왔다. “원래는 다이어리 스케줄 밑에 맨날 전장을 적어뒀는데 이제는 안 그래도 되네. 크롬은 맨날 접속하니까.” 이게 그 중 가장 인상 깊은 후기였다. 제작 기간이 두 시간도 안 걸린 간단한 프로그램이 누군가에게 필요했고, 지속적인 편리함을 줄 거란 점이 참 기쁘더라.

[후기] 실제 내가 겪은 문제 해결하는 것이 더 뿌듯하구나.

이전에 만든 웨일 브라우저 확장 프로그램 “글자수 세기”는 다운로드 수는 700명이고 ‘오늘전장’ 다운로드 160명이다.(220826 현재 글자수세기는 3000명 오늘전장은 400명이 이용한다.) 하지만 후자가 더 뿌듯하다. 이유는 크게 두 가지다.

첫 번째로 나와 내 주위 사람이 잘 사용한다. 일차적으로 나에게 너무 필요한 프로그램이었다. 글자수 세기는 불특정 다수가 사용하고 있지만, 이 프로그램은 내가 하는 게임에서, 내가 하는 컨텐츠를 즐기는 사람이 사용한다. 사용자와 심리적으로 가까워서 더 기뻤다.

두 번째 비슷한 종류의 프로그램이 없다. 내가 이전에 완성한 모든 프로젝트는 대부분 남들이 만든 것과 비슷했다. 예를 들면 일정관리(todolist), 채팅하기(chattingApp) 는 아무리 잘 만들어도 남들과 차별점을 느끼기 어려웠다. 하지만 이 앱은 대체재가 없다. 

결론적으로 진행했던 프로젝트 중에 가장 만족도가 높았다. 일상 속에서 느끼는 불편함을 지나치지 않고, 이를 해결하는 프로그램을 꾸준히 만들고 싶다.