LinKHU
경희대학교 웹서비스 117개를 클릭 한 번으로 여는 브라우저 확장
운영 중DAU 100+
AS-IS → TO-BE
AS-IS
- 북마크 아이콘이 전부 같은 학교 로고
- 이름을 정리해도 결국 글자를 읽어야 함
- 학과·단과대 주소는 모아둘 곳도 마땅치 않음
TO-BE
- 서비스마다 구분되는 아이콘으로 눈에 바로 들어옴
- 검색·단축키·숫자키로 키보드만으로 이동
- 117개를 담고 쓸 것만 골라 순서 지정
왜 만들었나
교내 사이트는 북마크로 관리하기가 유독 나쁩니다. 인포21·e-Campus·수강신청·도서관에 단과대와 학과 사이트까지 더하면 폴더 하나가 가득 차는데, 북마크에 붙는 아이콘이 전부 같은 경희대 로고입니다. 전부 같은 학교 도메인이니 favicon도 같습니다.
그래서 아이콘이 있어도 아무 구실을 못 합니다. 이름을 아무리 정리해 둬도 결국 글자를 하나씩 읽어서 골라야 합니다. 학과 사이트는 주소를 알아도 어디 적어 둘 곳조차 마땅치 않고요.
문제는 목록이 길다는 것이 아니라 아이콘이 정보를 전혀 담고 있지 않다는 것이었습니다. 그래서 서비스마다 구분되는 아이콘을 붙여, 눈으로 한 번에 찾고 클릭 한 번에 여는 확장을 만들었습니다.
교내 공통 서비스부터 단과대·학과까지 117개를 지원하고, 설정에서 자기가 쓰는 것만 골라 담고 드래그로 순서를 바꿉니다.
Chrome 웹스토어 · 네이버 웨일 스토어 · Firefox 애드온 세 곳에 배포돼 있습니다.
손이 키보드를 떠나지 않게
아이콘으로 눈은 빨라졌는데 손이 느리면 소용이 없습니다. 자주 쓰는 사람일수록 마우스로 팝업을 열고 아이콘을 겨냥하는 게 부담이라, 키보드만으로 끝나는 경로를 따로 뒀습니다.
| 키 | 동작 |
|---|---|
Ctrl/Cmd + Shift + L |
확장 열기 |
/ |
검색창으로 이동 |
Enter |
첫 번째 결과 열기 |
1~9 |
해당 순서 항목 바로 열기 |
검색은 이름뿐 아니라 ID와 카테고리로도 걸리고, 이름이 일치하는 것을 먼저 보여줍니다. 117개를 다 담아 두고 검색으로 꺼내 쓰는 방식이 가능해진 건 이 때문입니다.
만들면서 정한 것
서비스 목록을 코드가 아니라 데이터로
117개를 화면 코드에 박지 않고 데이터로 분리했습니다. 학교가 URL을 바꾸거나 서비스가 늘어도 데이터만 고치면 되고, 화면 로직은 건드리지 않습니다.
링크가 죽었는지 CI가 검사한다
교내 서비스는 학교 사정으로 주소가 조용히 바뀝니다. 사용자가 먼저 발견하면 이미 늦기 때문에, GitHub Actions에 검증 워크플로를 두고 데이터가 규칙을 지키는지 push마다 확인합니다.
스토어 세 곳을 한 소스로
Chrome·Whale·Firefox는 확장 매니페스트 요구사항이 다릅니다. 소스를 하나로 두고 빌드에서 갈라 세 스토어 심사를 통과시켰습니다.
트러블슈팅
드래그하면 링크가 아니라 이미지가 열리던 문제
팝업의 사이트 아이콘을 드래그하면 링크로 인식되지 않고 이미지 자체가 열렸습니다. 브라우저가 <img>의 기본 드래그를 먼저 잡아, 부모 <a>의 URL이 아니라 이미지 리소스를 끌고 간 것입니다.
이미지의 자체 드래그를 끄고(draggable=false) 부모 링크의 URL이 잡히게 했습니다. 고치는 김에 여는 방식도 정리했습니다 — 좌클릭은 새 탭, Ctrl/Cmd + 클릭은 백그라운드 탭. 학교 서비스는 원래 보던 페이지를 두고 여는 경우가 대부분이라 기존 탭을 덮어쓰는 게 맞지 않았습니다.
드래그로 순서를 바꾸는데 화면 밖으로 못 나가던 문제
설정 페이지에서 항목을 드래그해 순서를 바꿀 때, 목록이 화면보다 길면 화면 밖 위치로 옮길 방법이 없었습니다. 드래그를 유지하는 동안 자동으로 스크롤되게 했습니다.
학교가 조용히 바꾸는 URL
교내 서비스는 공지 없이 주소가 바뀝니다. 학부 개편으로 명칭이 바뀌기도 합니다. 실제로 자유전공학부·자율전공학부·전자공학부 명칭과 융합전공·소프트웨어융합학과·디지털콘텐츠학과 URL을 한 번에 정정한 적이 있습니다.
사용자가 먼저 발견하면 이미 늦기 때문에, 지원 서비스 문서를 데이터와 함께 갱신하고 CI가 형식을 검증하도록 걸어뒀습니다.
사용자에게 직접 듣기
팝업과 설정 페이지에 문의하기를 넣었습니다. 버그 제보나 추가 요청을 스토어 리뷰까지 가지 않고 그 자리에서 보낼 수 있습니다. 답변받을 이메일은 선택 입력이라, 익명으로 한 줄만 던지는 것도 됩니다.
위의 트러블슈팅 세 건이 전부 사용자 제보에서 나왔습니다. 제보 경로를 짧게 만드는 것이 기능 하나를 더 만드는 것보다 나았습니다.
기술 스택
JavaScriptChrome ExtensionGitHub Actions