베스

대학별 실시간 경쟁률 확인 사이트 제작기

bass9030 — Sun, 12 Oct 2025 02:38:12 +0900

서론

코딩을 엔트리로 처음 입문한 초딩 시절을 지나 그냥 저냥 지냈던 중딩, 그리고 고1, 고2를 지나 결국엔 오지 않을것 같았던 고3 대학 원서접수철이 되었다.

나는 공부를 잘하는 편은 아니기에 그냥 대충 성적에 맞게 대학을 알아보고 있었는데 친구에게 연락이 왔다.

"대학별로 실시간 경쟁률 볼수 있는 프로그램 만들어줘"

그냥 진학사 경쟁률 페이지 들어가서 보면 되는거 아니냐고 되물으니 대학교 여러개를 돌려가며 보는게 불편하니 한곳에서 모와보고 싶단다.

귀찮긴 하지만 만들면 나도 꽤 유용하게 쓸거 같기도 하고 재밌어 보여서 개발에 들어갔다.

개발 - 백엔드

프레임워크는 항상 그랬듯 ExpressJS로 시작하였다. 요즘 NestJS를 조금 깔짝여보고 있긴 하지만 이건 원서접수기간인 일주일안에 빠르게 제작해야했기에 빠르게 개발할 수 있는 ExpressJS로 선택하였다.

경쟁률을 보는 사이트이기에 경쟁률을 불러올 수 있는 API가 필요하지만, 안타깝게도 진학사에서는 공식적(공개적)으로 경쟁률을 제공하는 API를 제공하지 않는다. 그러기에 뒷문(?)을 찾아서 경쟁률 정보를 가져와야한다. 진학사와 유웨이는 SSR(Server-Side-Rendering)을 사용하여 대학별 경쟁률을 표시해주기 때문에 직접 사이트의 HTML을 파싱해줘야했다.

우선 진학사 스마트 경쟁률 페이지에 들어가 대학 목록 리스트를 찾아주었다.

여기서 우리가 볼것은 'hdnResultNow' 값이다. 여기에는 아무 조건을 걸지않고 검색했을때 경쟁률 페이지로 인도해줄 URL 정보가 포함된 JSON이 들어간다. 이 JSON을 그냥 사용하기에는 구조가 약간 더럽다(?)

그렇기에 한번 가공을 통해 필요한 정보만 정리한 JSON으로 변환해주었다.

이제 특정 대학의 경쟁률 페이지에서 특정 전형/특정 과의 경쟁률을 크롤링해주는 코드를 작성해주었다.

진학사 제공 경쟁률 페이지는 표마다 각각 데이터에 해당하는 셀마다 클래스가 잘 붙어있어서 크롤링이 수월했다.

좀 까다로웠던건 유웨이 제공 경쟁률 페이지였는데, 얘내들은 클래스에 무슨 셀인지를 적어놓질 않고, 학과마다 표 구조가 약간씩 달랐다.

덕분에 마음에는 안들지만 좀 더러운 분기문을 써서 어찌저찌 제대로 긁어오도록 처리하였다.

이후 이를 핸들링해주는 Router 코드와 응답속도 개선을 위한 간단한 캐시를 적용하며 백엔드를 마무리 하였다.

개발 - 프론트엔드

프론트엔드는 디자인에 재능이 없기 때문에 그냥 bootstrap으로 딸깍해주었다.

깨알같이 면책조항도 써두었다.

데이터는 추가할때마다 localStorage를 사용하여 저장하게 하였고, 브라우저 변경등에 대응하도록 목록 내보내기/불러오기를 추가하였다.

후기

이렇게 하루만에 주요 기능을 완성하고 친구들에게 웹페이지 URL를 주었을때 친구들은 아주 만족하였다.

비록 크롤링이라는 한계에서 오는 어쩔수 없는 불편함(학과/전형 자동완성 안됨, 정확히 입력 안하면 조회안됨 등등)은 있었지만 친구들은 돈받고 팔아도 되겠다며 극찬을 날려주었고, 동시에 황금돼지띠인 이번 Team 07의 엄청난 경쟁력(...)을 한눈에 보여주게되며 절망 역시 심어주게되었다.

원서접수기간인 일주일 안에 최대한 빨리 개발해야한다는 제약때문에 아쉬움이 좀 남았긴하지만, 그래도 이정도면 나름 만족스러운 결과물이 뽑힌거 같고 또 친구들도 만족하며 써주니 나름 뿌듯하다.

프로젝트 Github: https://github.com/bass9030/univ-live-ratio

GitHub - bass9030/univ-live-ratio

Contribute to bass9030/univ-live-ratio development by creating an account on GitHub.

github.com

마훅 - 마후마후 트윗 번역 웹훅 제작기

bass9030 — Mon, 20 Jan 2025 00:46:56 +0900

현재 나는 두 가지의 서비스(보컬라디오, 마훅)를 운영하고 있다.

오늘은 그중에서 마훅의 개발 스토리를 써보자 한다.

1. 마훅의 시작

나는 2020년도부터 마후마후를 알게 되어 덕질을 시작했다. 그러면서 자연스레 마후마후의 트위터를 보기 시작했다.

하지만 당시에는 트위터를 활발하게 하지 않았기에 마후가 올리는 트윗을 몇일 ~ 몇 주 뒤 뒤늦게 확인하는 경우가 잦았고, 당시 나는 그게 마음에 들지 않았다. 그리고 개인적으로 트위터 내장 구글 번역기 퀄리티도 별로 신뢰하지 않았기에 "마후마후 트윗을 디스코드랑 카톡으로 보내는 봇을 만들어보자!"로 mafuTranslate 프로젝트를 시작하였다.

비공개되어있는 'mafuTranslate' 레포의 첫 커밋 기록

당시에는 트위터의 v1 API가 무료로 풀려있어서 v1 API과 Python을 통해 5분 간격으로 트윗을 감지해 번역 후 전송하는 코드를 완성하였다.

당시 Python으로 구현된 코드 일부

디스코드 웹훅 전송까지 구현하고 난 뒤 당시 카카오톡 봇 제작자들 사이에서 유행처럼 번지던 '카링'(구 카카오링크, 현 카카오쉐어)을 통한 전송을 구현하려고 했는데, 개발 당시 카카오에서 카카오링크 관련 인증 로직을 변경한 지 얼마 지나지 않았던 때라 Python에서 작동하던 카카오링크 모듈이 존재하지 않았다.

이에 Python으로 작성된 카카오링크 모듈 수정을 시도하였다가 결국 실패하였다. 그래서 카카오톡 봇용 카카오링크 모듈이 RhinoJS로 작성되어 있다는점에 착안, 같은 JS인 NodeJS를 사용하여 카카오링크까지 전송되도록 다시 제작하였다.

당시 NodeJS로 구현된 코드 일부

그렇게 2년동안 큰 문제없이 즐겁게 마후마후 트윗을 한글로 즐기고 있었다.

2. 갑작스런 이별

즐겁게 마후 트윗을 한국어로 즐기던 중 갑자기 트위터에서 메일이 하나 날라온다.

갑자기 트위터가 v1 API를 지원종료한다고 메일을 보내왔다.

당시 나는 '뭐 v2에도 프리티어 있을 텐데 그냥 v2 마이그레이션만 딸깍하면 되겠지~'하고 가벼운 마음으로 v2 마이그레이션 작업을 시작했다.

그런데 뭔가 이상하다. 분명 공식 문서대로 작성하는데 계속 트윗이 불러와지질 않는다.

인터넷을 검색해 본다. 일론머스크가 트위터 API를 유로화 했단다. v2 API 프리티어론 자기가 올린 트윗 조회밖에 안 된단다. 이런 젠장.

그렇게 2023년 10월. mafuTranslate 프로젝트는 관짝에 들어가게 된다.

3. 부활

그렇게 mafuTranslate 프로젝트가 관짝에 들어간 지 3달 뒤인 2024년 1월 새해, 갑자기 뭔 바람이 들었는지 mafuTranslate 프로젝트를 다시 살려보고 싶다는 욕구가 셈 솟았다. 하지만 당연하게도 3달 동안 트위터 API는 변한 게 없었고, 원래 목적대로 사용하려면 돈을 내야 했다.

하지만 학생이 대충 깔짝이는 프로젝트에 거금을 들이기란 있을 수 없는 일이다. 그래서 대안책으로 embed 사이트에서 텍스트를 뽑아와 우회하는 방법을 생각하여 구조를 뜯어보던 중 수상한 걸 발견했다.

"__NEXT_DATA__"라는 아주아주 수상해 보이는 json..

펼쳐서 이곳저곳 뒤져보니

!!!

트윗 타임라인 데이터가 쓰기 편하게 json으로 있는것 아닌가!!

신나게 대응 코드를 작성하고 테스트해보았다.

근데 어라? 이상하다. 마지막 트윗이 당시 홍백가합전 트윗으로 표시되었다.

분명 브라우저로 볼 때는 최근 트윗이 제대로 보였는데?

좀 더 확인해 보니 쿠키를 안 주면 최신 타임라인을 주지 않는다는 것을 알았다.

로그인 쿠키도 같이 보내도록 수정하고, 개발 당시 파파고 API도 같이 유로화가 돼서 Kakao i 번역기도 같이 뜯어서 이식하였다.

당시 노토지방 지진으로 난리도 아니였었다.

그렇게 mafuTranslate 프로젝트는 중단 3개월 만에 다시 재가동을 선언하였다.

4. 욕심

그렇게 혼자 만족하면서 5분 간격 사이에 트윗이 여러 개 올라왔을 때 대응, Kakao i 번역이 마음에 안 들어서 DeepL 번역기로 작동하게 수정 등 여러 가지 수정을 거치면서 문뜩 한 생각이 들었다.

"이거 나만 쓰기엔 좀 아까운 듯? 분명 수요 있긴 할거 같은데?"

이 생각을 시작으로 '유사 왁스코드(우왁굳과 관련인들의 범용 알림 웹훅)를 만들어보자'라는 생각으로 mafuTranslate 프로젝트를 기반으로 위에다가 웹페이지를 얹는 방식으로 빠르게 제작하였다.

마훅 최초 버전 웹페이지

이름은 단순하게 '마후마후' + '웹훅'을 합쳐 마훅이라고 지었다.

그리고 홍보를 해야 하는데.. 홍보할 길이 없었다. 내가 트친이 많은 것도 아니고 내 주변인중에 마후 팬이 있는 것도 아닌데 이걸 어떻게 퍼트리지?

그렇게 고심하다 생각난 곳이 '디시인사이드'다. 전에도 마후마후 마이너 갤러리의 존재를 알았기에 이곳에 올리면 그나마 사람들이 와서 써주지 않을까라는 생각에 일단 무작정 올렸다

결과는 꽤 괜찮았다. 개념글도 가고 사용자도 한 3명 생겼었던 거 같다.

그렇게 업데이트도 꾸준히 하고 업데이트하다가 찐빠도 내면서 어찌어찌하다 보니

이용자도 11명으로 나쁘지 않게 생겼고 (2개는 내 디코 서버에 등록해 두었다)

갤러리 공지랑 관련 링크 글에 내 서비스가 박제되는 엄청난 성과도 이루었다.

5. 마치며

솔직히 처음 트윗 번역 웹훅을 제작할 때까지만 해도 그냥 혼자 깔짝이는선에서 끝날 줄 았았다.

근데 점점 욕심이 생기니 많지는 않지만 그래도 쓰는 사람이 있는 서비스가 되었다는 게 나름 뿌듯하다.

이렇게 보면 사람 일 어떻게 될지 진짜 모르는 게 맞는 거 같다.

프로젝트 Github: https://github.com/bass9030/mafu-webhook

GitHub - bass9030/mafu-webhook: 마후 트윗을 디스코드 웹훅으로 드셔보시겠습니까?

마후 트윗을 디스코드 웹훅으로 드셔보시겠습니까? Contribute to bass9030/mafu-webhook development by creating an account on GitHub.

github.com

[슬라임 트래커 제작] #2 - 납땜

bass9030 — Thu, 16 Jan 2025 20:47:36 +0900

축제가 24년 12월 24일 화요일이였는데 글 올라온 시점 보면 알다싶히 결국 기한을 못맞춰 동아리 체험 부스에는 못쓰게 되었다..

내가 PCB를 늦게 주문한것도 있지만

이놈들이 PCB Assembly 주문을 실수로 보류시켜버리고 말도 안해서 지연된것도 한몫 한다. 그래도 최대한 기한 맞춰볼려고 배송 방법까지 페덱스로 바꿨는데 젠장..

4레이어 PCB는 PCBWay보다 JLCPCB가 싸길레 처음 시켜봤는데 첫인상이 별로가 됐다.

뭐 그래도 재료는 왔으니 어찌하겠나. 만들어야지. 2편은 납땜이다.

1. 회로 점검은 하남자나 하는것

왜 사진엔 6개밖에 없냐고? 작업 중간에 처음 사진 안찍은걸 깨닫고 찍음

무려 9만원을 들인 PCB께서 도착하였다.

물론 주문전에 수십번 슬라임 트래커 공식 회로도와 BMI270 breakout 보드의 회로도를 수십번 비교해보며 이상이 없는것을 확인한 뒤 주문한 PCB기에 문제가 없을거라 믿었다.

하지만 만약에 문제가 있다면 배터리까지 달리는 놈이라 잘못되면 LER(Light-Emitting-Resistors)이 되거나 폭탄이 만들어짐과 함께 돈 10만원이 날아가기 때문에 테스터기로 간단하게 점검을 시작했다.

Light-Emitting-Resistors

그렇게 혹시 모를 사태에 대비해 테스터기를 몇번 찍어보다가

"에이 설마 내가 설계를 잘못했겠어?"라는 근자감과 함께 테스터기를 집어넣고 인두기와 납을 꺼냈다.

WeMos D1 Mini 기판을 끼울 핀 소켓을 납땜하고

리튬폴리머 충전용 TP4056 칩 역시 납땜하였다.

이제 서브센서 연결하는 커넥터와 배터리 꽂을 커넥터까지 납땜을 쳐준다.

이제 이걸 8번 반복하면 된다

2시간 걸렸다 (납땜 타임랩스)

그렇게 해서 납땜을 완료하였다.

다음편에는 케이스 조립, 펌웨어 업로드를 작성하도록 하겠다

[슬라임 트래커 제작] #1 - PCB 설계

bass9030 — Sat, 14 Dec 2024 13:40:31 +0900

0. 프롤로그

어쩌다 보니 동아리 발표에서 VR 버츄얼 유튜버 체험 머시기 부스를 하게되었다.

원래는 VRChat과 Warudo로 대충 때우고 말려 했는데 아무리 생각해도 이것만 하기엔 애들이 "VR"를 보고 온 것과는 다르게 할 콘텐츠가 없어 실망할거 같은것이 눈에 보였다.

그래서 GPT 한테 도움을 요청해봤더니

Mocap, 즉 모션캡처 장비를 써보라는 조언을 해주었다.

그 순간 머리속을 스쳐가는 단어 "슬라임 트래커"

광학식이 아닌 IMU 센서를 사용하여 기존 바이브 트래커의 비싼 가격과 베이스 스테이션이 설치되야한다는 두 단점을 해소한 트래커이다.

심지어 오픈소스라 회로도 맞게 대충 배선 짜고 오픈소스 펌웨어 업로드만 딸깍하면 된다. ~~(실제로도 그렇다면 굉장히 좋겠지만..)~~

그렇게 슬라임 트래커 자작을 시작하게 되었다.

1. IMU 센서 선정

앞서 말했듯 슬라임 트래커는 IMU 센서로 우리들의 움직임을 파악한다.

그렇기에 이 IMU 센서의 정확도가 구리면 당연히 트래킹 역시 제대로 되지 않게된다.

이에 대한 내용은 슬라임 VR 문서에 자세히 나와있다

https://docs.slimevr.dev/diy/imu-comparison.html

IMU Comparison - SlimeVR Docs

The community has been hard at work testing various IMUs for DIY SlimeVR trackers. A survey was held within the DIY community for a clearer picture of the current state of available IMUs. This page is based on user feedback and weighed against the survey,

docs.slimevr.dev

IMU는 크게 지자기 센서와 가속도 + 자이로스코프 센서를 사용한 9축 방식과 일반 가속도 + 자이로스코프 센서만을 사용한 6축 방식이 있다.

6축의 경우 단순 가속도 + 자이로스코프 센서만을 사용하여 위치를 파악한다. 물론 6축만 사용해도 충분한 추척성능을 보여주나, Yaw 움직임이 있을 경우 사용하면서 점점 오차가 발생하게 된다. Yaw 오차가 발생하면서 실제 서있는 자세와 VR속 나의 위치에 오차가 발생하여 주기적으로 위치 재설정을 해야한다.

반면에 9축의 경우 가속도 + 자이로스코프 센서만 이용하는것이 아닌 지자기 센서도 함께 사용한다.

지자기 센서로 실제로 얼마나 돌았는지에 대한 절대적인 수치를 제공받을 수 있기 때문에 6축 방식보다 Yaw 오차가 훨씬 줄어 위치 재설정을 하는 빈도가 줄어든다.

"그럼 무조건 9축으로 하는게 더 좋은거 아님?" 이라고 할수도 있지만, 9축방식의 경우 지자기 센서, 즉 지구 자기장을 이용하기 때문에 주변에 자기장을 교란시킬수 있는 물체가 있다면 오히려 6축보다 못한 성능을 보여줄수도 있다. 실제로 9축 트래커를 구매했다가 자기장 교란으로 지자기 센서를 끄고 6축 트래커로 사용하는 사람도 여럿 있다.

필자는 BMI270을 이용하여 6축 트래커를 제작하기로 하였다.

2. 회로 구성

그다음으로 회로를 구성해야한다.

공식문서에서 자신이 어떤 센서 조합으로 제작할때 회로를 어떻게, 뭘 주의하면서 해야하는지 친절하게 알려준다.

https://docs.slimevr.dev/diy/tracker-schematics.html

Tracker Schematics - SlimeVR Docs

docs.slimevr.dev

원래는 BMI270의 breakout(칩 형태가 아닌 PCB 보드형태로 되있는것)보드를 모듈식으로 끼우는식으로 제작할려 했으나, BMI270 breakout 보드를 국내에서 구매할 수 있는 경로가 없어 그냥 센서 칩을 온보드에 바로 박아버리는쪽으로 설계했다.

이후 위 회로도를 기반으로 PCB를 설계한 후 JLCPCB에 PCBA 주문을 넣었다.

다음편인 조립은 PCB가 도착하는대로 작성하도록 하겠다.

제발 PCB 설계미스 없게 해주세요 제발 PCB 설계미스 없게 해주세요 제발 PCB 설계미스 없게 해주세요 제발 PCB 설계미스 없게 해주세요 제발 PCB 설계미스 없게 해주세요 제발 PCB 설계미스 없게 해주세요 제발 PCB 설계미스 없게 해주세요 제발 PCB 설계미스 없게 해주세요 제발 PCB 설계미스 없게 해주세요 제발 PCB 설계미스 없게 해주세요

사볼콘 만들기 #2 - 재료 도착, 조립

bass9030 — Sun, 1 Sep 2024 11:19:13 +0900

먼저 전자부품들이 도착하였다. 커넥터와 칩저항, Teensy 2.0 보드가 도착했다.

또 기존에 쓰던 1mm 유연납이 거의 다써가서 0.8mm 200g 짜리 납도 새로 구매했으나.. 무연납으로 사버렸다..

잠깐 쓰다가 380도에선 드럽게 안녹고 400도 이상 올리기엔 알리산 인두기라 무섭고 해서 그냥 집에 있던 유연납을 그대로 사용했다.

전자부품들이 도착하고 몇일 뒤 PCB가 도착했다. 통관은 8월 14일날 끝났으나 하필 14일이 택배 쉬는날이라 금요일에 도착했다.

이후 본격적으로 PCB를 납땜하고 커넥터를 만들어갔다. PCB 소자 납땜까진 나름 할만했는데 커넥터 납땜이 지옥이였다.

쬐그만한 커넥터 핀을 총합 40번이나 납땜하니 미칠 지경이였다.

PCB 납땜을 완료하고 하우징을 제작했다. 이때부터 슬슬 지치고 이걸 완성하겠다는 생각밖에 안들어서 사진을 못찍었다.

이런걸 찍어야 유튜브든 블로그든 할텐데 나는 인플루언서 체질은 아닌가보다.

목공은 경험이 별로 없어서인지 좋은 퀄리티는 안나왔다.

드릴질을 안하고 나사못을 박으면 목제에 금이 간다는건 알아서 사전에 드릴질을 하는데

너무 세게 누르니까 MDF가 약간 찢어져버리고, 드릴질을 구멍에 맞게 하고 나사못을 박았는데 하판이랑 벽이랑 뚫은 구멍위치가 안맞았는지 박는 족족 금이 갔다.

그래도 못쓸정도는 아니여서 그냥 진행하기로 했다.

어차피 내 DIY의 목표는 "주요 기능만 제대로 하면 된다"니까.

이후 버튼들을 조립하고 커넥터들을 끼워줬다.

추가로 집에 type-C 암놈 포트가 남는게 몇개 있어서 드릴로 열심히 파내서 type-C로 연결할 수 있게 해주었다.

이후 상단에 번데기너트를 박은 다음 나사를 조립하여 최종적으로 사볼콘 하드웨어 제작을 완료하였다.

조립한뒤 테스트해보니 생각보다 시끄러워서 버튼에다 종이 테이프를 4겹정도 위아래로 붙여 조금이나마 줄여줬다.

뭔가 줄은거 같긴 한데 잘은 모르겠다.

이제 Teensy 2.0에 들어갈 코드를 작성해야하는데 이는 전에 직접 만든 종이 Pocket Voltex의 코드를 Teensy 2.0 사양에 맞춰 약간 변경하여 사용하였다.

이로서 2주만에 자작 사볼콘이 완성되었다.

총 가격은

버튼: 약 15,000원

스위치, 스프링: 16,800원

MDF 재단: 28,500원

PCB: 약 20,000원

전자부품: 44,874원

====================

약 110,054원이 들었다.

======================후일담=======================

이놈을 만들면서 우여곡절이 몇개 있었는데

1) PCB

보드 설계를 끝마치고 PCBWay에다가 주문을 넣고 PCB 회로를 보는데 아뿔싸..

엔코더 풀업저항 회로를 완전히 잘못짠것이다. 어쩐지 전 사볼콘에는 선이 4개가 나와있었는데 내 회로는 3개밖에 안나와서 뭔가 이상하다 생각은 했었다. 그게 진짜 이상한걸줄이야..

머릿속이 햐얘져서 급하게 보내느랴고 번역기가 오역낸것도 그냥 복붙해서 보냄

급하게 메일로 '비상!!!! 도움!!! gerber파일 바꿔줘!!!!!'라는 메일을 보냈다. 다음날 답장을 보니

'컨트롤러 보드는 바꿀수 있는데 엔코더 보드는 이미 만드는중이라 못바꿔줌 ㅈㅅ;; ㅎㅎ'

이때 휴일이였는데 이친구들은 참 일처리가 빠르더라.. 덕분에 5$ 더 들여서 엔코더 보드를 새로 주문했다. 다행히 배송은 묶음이 되서 배송비까진 안냈다.

그리고 PCB를 하우징에 고정시킬려고 M4규격의 나사와 스탠드오프를 샀는데 보드에 마운트구멍을 2.2mm로 뚫어놨다...

그래서 지금은 고정 안하고 그냥 쓰고 있다.

2) 조립

글을 읽다가 눈치챈 사람도 있겠지만, 깜빡하고 PCB에 스타트 버튼 커넥터을 안넣어버렸다. BT A/B/C/D와 FX L/R, VOL L/R에만 신경쓴 나머지 스타트 버튼은 까맣게 잊어버린것이다.

전선을 다써서 전선 딱 맞춰 썼다고 좋아했는데 이런 날벼락이 있을 줄이야..

스타트버튼은 일단은 폼으로 달아둘까 하다가, 그래도 달려있는 버튼이니 급하게 아두이노키트에 있는 점퍼선을 잘라 연결해줬다. 사진에서 검정선들 사이 눈에 띄는 회색, 보라색, 흰색선들이 추가한 버튼 커넥터이다.

3) 목공

이놈이 생각보다 복병이였다.

원래 계획은 깔끔하게 구멍을 잘 뚫고 나사못 박아서 최대한 깔끔하게 단차 없이 마감하는거였는데

이게 나무를 고정할 공구가 없으니까 첫큐부터 망해버렸다. 구멍을 뚫어가면서 벽과 하판을 잡아줄게 아무것도 없으니 구멍을 뚫어도 구멍이 서로 안맞아 결국엔 나무가 갈라졌다. 그리고 이게 MDF 특성인건지 드릴이 반정도는 잘 들어가다가 다 뚫어질때쯤에 깔끔하게 뚫리는게 아니고 찢어진다고 해야하나? 아무튼 정상적으론 안뚫렸다. 그래도 못쓸정도의 상태가진 가지않아서 다행이 잘 조립했다.

뭐 이런 뻘짓거리 좋아하는 나로써는 재미있는 프로젝트였다.

그냥 대충 사부작거리고 마는것도 아니고 한번 각잡고 만든 프로젝트다 보니 나에게 뭔가 더 의미가 있었다.

사볼콘 만들기 #1 - 재료 준비

bass9030 — Mon, 12 Aug 2024 14:37:14 +0900

0. 프롤로그

나는 리듬게임을 좋아한다.

PC는 디맥투온을 주로 하고 모바일은 프세카와 피그로스, ~~리플렉비트 플러스~~, 아케이드는 사볼, 노스텔, 유비트, 츄마이 등을 즐겨한다.

작년까지는 걸어서 갈만한 거리에 동네 소규모 오락실이 있는 오락실세권이라 그곳에서 간간히 사볼을 했었는데

그 오락실이 올해 초 폐업했다.. ~~코로나 시발~~

이제 오락실을 갈려면 대전까지 원정을 가면서 교통비로만 만원상당을 까먹어야한다. 사볼 프리미엄 타임 5판이 날라가는 금액이다. 또 집에서 나가서 시외로 가야한다는 굉장한 업적을 이루어야한다.

그래서 집에서 사볼이라도 하기위해 사볼콘을 만들기로 했다.

1. 그깟거 그냥 사면 안됨?

10만원이 넘는 거금을 한번에 지불할 능력이 없다. 학생이니까.....

그리고 무엇보다 직접 만들면 재밌으니까 만드는거다!

2. 재료 선정

그 다음으로 재료를 선정해야한다.

사실 이글 쓰기 전에 사볼콘을 한번 만든적이 있다.

과거 인터넷을 보다가 찾은 Pocket Voltex를 기반으로하여 종이박스로 만들었었다.

문제는 종이로 만들어서 무게감이 없으니 칠때마다 계속 미끄러지고 납땜 상태 불량으로 툭하면 키가 씹혔다.

이번 사볼콘은 이런점을 싹 개선해서 제작하였다.

2-1. 입력부

가장 중요한 입력부는 기존 키보드 스위치에서 실 아케이드 규격 버튼을 사용하기로 했다.

마침 알리익스프레스에서 IST 버튼보다 저렴한 가격에 동일 규격 버튼을 판매하길래 해당 버튼을 구매했다.

배송 후 확인해보니 버튼 무게가 이걸로 리듬게임 하다간 지쳐서 못할정도로 꽤 무거워서 IST물에서 가벼운 스위치와 스프링을 구매해서 교체해주었다.

엔코더는 위에서 만든 사볼콘에서도 사용했고 PocketVoltex와 퍼스투 포터블 사볼콘(추정)에서도 사용하는 PEC16-4020F-N0024 엔코더를 똑같이 사용하기로 하였다.

2-2. 하우징

하우징은 상판의 경우 https://arca.live/b/mgamm/26420675 해당 글의 캐드 파일을 기반으로 내가 사용할 엔코더에 맞게 약간 변형하였다.

이후 상판은 업체에 레이저커팅을 맡기고, 상판 이외의 하우징은 전에 책상 상판을 주문했던 업체에서 구매하였다.

2-3. 전자파트

컨트롤러의 두뇌를 담당할 MCU는 Teensy 2.0 보드를 사용하기로 했다.

이번 컨트롤러는 각잡고 만들고 싶어서 PCB까지 제작하기로 했다.

칩저항이랑 커넥터 핀 최소수량이 100개라 일단 시켰는데 만들고 남은거 어디다 쓰냐...

Teensy 2.0 보드가 들어갈 메인 기판, 엔코더를 고정해줄 기판과 그 기판에 들어갈 부품들을 주문하였다.

2-4. 기타 부품

그리고 상판과 하우징, 그리고 보드를 지지해줄 번데기 너트와 볼트들을 구매하였다.

다음편인 조립편은 PCB와 부품들이 도착하면 작성하도록 하겠다.

[Web] NodeJS로 웹 푸시알림 구현하기

bass9030 — Wed, 3 Apr 2024 14:29:26 +0900

최근 도에서 열리는 학생 해커톤 페스티벌에 참가하게 되면서 웹 푸시알림을 구현할 일이 생겼다.

이에 웹 푸시를 구현하면서 알게 된 내용을 간단하게 정리해보려고 한다.

web-push 모듈 설치

먼저 NodeJS에서 웹 푸시를 쉽게 구현해주는 web-push 모듈을 설치합니다.

npm i web-push

VAPID 생성

웹 푸시 알림 전송에는 VAPID라 불리우는 키쌍이 필요합니다.

web-push 패키지에는 VAPID를 생성할 수 있는 기능을 지원하기에 VAPID를 생성해줍니다.

npx web-push generate-vapid-keys

그럼 아래와 같이 키가 생성되는데 이후 푸시알림 전송시 필요하니 유출되지 않도 잘 간직해둡니다.

서비스워커 작성

그 다음 웹 브라우저에서 푸시 알림을 처리할 수 있도록 서비스워커에 push 이벤트를 처리하는 코드를 작성해야합니다.

서비스워커는 브라우저가 백그라운드에서 실행하는 코드로, 웹페이지와는 완전히 별개로 백그라운드에서 열심히 이벤트를 처리하는 역할을 합니다.

위에서 서술했듯 서비스워커는 웹페이지와 완전 별개로 떨어저 있기에 서비스워커에서는 DOM, window 요소등을 사용할 수 없습니다.

먼저 서비스워커로 사용할 js 파일을 퍼블릭 폴더에 생성해줍니다.

이후 push 이벤트 리스너를 추가하여 푸시알림 수신 이벤트를 생성해줍니다.

/* serviceworker.js */

self.addEventListener("push", (event) => {
});

그다음 이벤트에서 수신된 내용을 바탕으로 실제 알림으로 표시하는 코드를 작성해줍니다.

서버단에서 보낸 푸시 정보는 event.data로 수신되니 으로 수신되니 서버에서 보낸 형식에 맞게 파싱해줍니다.

알림 표시의 경우는 브라우저의 Notification API를 사용하여 구현합니다.

/* serviceworker.js */

self.addEventListener("push", (event) => {
    const payload = event.data.json();
    event.waitUntil(
      registration.showNotification(payload.title, {
        body: payload.body,
        vibrate: [100, 100, 100],
      })
    );
});

웹페이지 알림 전송 권한 요청 및 푸시 알림 구독

이후 웹 푸시알림을 브라우저가 처리하고, 알림을 보낼수 있도록 해야합니다.

웹페이지 내에 JS코드를 생성한후 먼저 serviceWorker, PushManager, Notification을 브라우저에서 지원하는지 확인해줍니다.

/* index.js */

if ("serviceWorker" in navigator && "PushManager" in window && 'Notification' in window) {
}

그다음 serviceWorker를 등록해줍니다. 저의 경우 서비스워커를 /javascripts/serviceworker.js에 저장했기에 이를 기준으로 등록하였습니다.

/* index.js */

navigator.serviceWorker.register("/javascripts/serviceworker.js").then(e => {
});

이후 웹페이지 알림 전송권한을 취득합니다.
알림 전송권한을 취득하였다면 subscribePushNoti를 호출해 푸시알림을 등록해줍니다.

/* index.js */

navigator.serviceWorker.register("/javascripts/serviceworker.js").then(e => {
	if(Notification.permission == 'default') {
		Notification.requestPermission((permission) => {
			if(permission == 'granted') {
				// 푸시알림 구독
				subscribePushNoti(e);
			}
		});
	}else if(Notification.permission == 'granted') {
		// 푸시알림 구독
		subscribePushNoti(e);
	}
});

subscribePushNoti함수는 아래와 같이 작성하였습니다.

async function subscribePushNoti(e) {
    let subInfo = await e.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: PUBLIC_KEY
    });
    await fetch('/api/subscribe', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(subInfo)
    })
}

serviceWoeker.register().then(e => {})에 포함된 e.pushManager.subscribe()를 사용하여 푸시 알림을 구독합니다.

subscribe()에 사용되는 옵션은 다음과 같습니다.

userVisibleOnly: 사용자에게 표시되는 알림만 받기

applicationServerKey: 발급한 VAPID의 Public Key

이후 e.pushManager.subscribe()를 실행하여 나온 구독 정보를 서버로 전송합니다.

푸시알림 구독 처리

이후 서버단에서 구독 정보를 토대로 처리해줍니다.

ExpressJS로 구현하였습니다.

var express = require('express');
var router = express.Router();
var webpush = require('web-push');
let subInfo = {};

// web-push 모듈 설정
webpush.setVapidDetails(
	'mailto:<email 주소>',
    VAPID_PUBLIC_KEY,
    VAPIID_PRIVATE_KEY
);

// 푸시알림 전송
router.post('/event', function(req, res, next) {
	// status 0: 전송 성공
	// status -1: 구독 정보 없음
	if(!!!subInfo) {
		res.json({status: -1});
		return;
	}
	webpush.sendNotification(subInfo, JSON.stringify({title: 'test', body: 'test'}))
	res.json({status:0}
);
});


// 푸시알림 구독정보 저장
router.post('/subscribe', function(req, res, next) {
	subInfo = req.body;
	res.json({status: 0});
});

웹으로 전송한 구독정보를 subInfo 변수에 저장후 /event로 POST 요청 전송시 subInfo에 저장된 구독 정보를 바탕으로 푸시알림을 전송합니다.

이후 웹페이지에 한번 접속하여 알림 전송을 허용해준후, /event로 POST 요청을 보내면 웹브라우저로 알림이 전송되는것을 확인할 수 있습니다.

[해당글은 https://blog.bass9030.dev/post/15 에서 이동된 글입니다]

[Android] Intent로 웹페이지를 열면 웹뷰 충돌이 발생할때

bass9030 — Wed, 3 Apr 2024 14:06:31 +0900

아버지가 부탁하신 선박검색앱의 버그도 어느정도 잡았고, 자동 업데이트도 구현해놔서 이제 버그는 없겠지하고 안심하고 있었는데 아뿔싸..

아버지가 어느 선사의 웹페이지가 켜지지 않고 위 사진의 오류가 뜬다며 나를 호출하셨다.

증상 구현

아버지깨선 앱을 키고, 가장 먼저 '범블비호'라는 선사의 웹페이지에 접속하면 위와 같은 오류가 뜨거나 크롬 창이 감빡하고 나타났다 사라진다고 하셨다.

그로고 다른 선사들의 페이지는 멀쩡하게 접속되고, 아무 선사나 들어갔다 나간뒤 범블비호의 웹페이지에 접속하면 멀쩡해진다고 하셨다.

웹뷰 이번에도 너 때문이냐

처음에는 웹뷰 관련 오류인줄 알고 아버지께 웹뷰 업데이트와 크롬이 뭔가 안맞는거 같으니 임시로 다른 선사를 먼저 들어가고 범블비호를 들어가라고 해둔 뒤 디버깅에 돌입했다.

우선은 본인의 폰에서 테스트한 결과, 똑같이 재현되었다. 우선 웹뷰의 업데이트를 삭제하고 들어가봤는데 얼래? 똑같은 화면이 표시되었다.

일단 로그부터 까보자

웹뷰 업데이트를 제거했는데도 해당 증상이 발생한다는것은 내 코드에 문제가 있다는것이고, 그럼 로그에도 뭐든 찍힐것이기 때문에 로그가 찍히는걸 보면서 확인해봤다.

하지만 야속하게도 로그에는 워닝 조차도 쓰지 않았고, 디버깅은 미궁으로 빠져들어갔다.

설마 한국 URL 때문에?

그렇게 저 문구를 구글이던 네이버던 수십번을 검색해봤지만, 다들 과거에 있던 웹뷰 업데이트로 인한 앱 먹통사태만을 설명할뿐 내 케이스는 전혀 나오질 않았다.

그러던중 머릿속을 스쳐지나가는 생각하나.

저 URL 한글이였지 않았나?

범블비호 선사의 URL은 범블비호.com으로 한글 URL을 사용중이다.

한글 URL은 당연하게도 해외에서는 전혀 사용되지 않기 때문에 Intent 인자로 넘겨줄때 무언가 궁합이 안맞아서 허용되지 않은 문자열이 흘러들어가고,

이때문에 크롬이 튕기는건데 안드로이드는 이게 웹뷰 충돌로 튕기는것으로 착각해 웹뷰 오류창을 보여준것이라는 가설이 세워졌다.

퓨리코드 변환

그래서 해당 오류를 수정하기 위해 입력한 URL을 퓨니코드로 변환한 URL로 크롬을 열게 해주면 해결이 된다.
여기서 퓨리코드란 xn--cg4bkiv2oina.com 이런식의 누가봐도 스팸 웹사이트 냄새 풀풀나는 URL인데
사실 이는 한글URL을 기본URL에서 사용가능한 문자들로 바꾼 인코딩중 하나이다.
참고로 저 인코딩된 URL은 삼성전자.com이나, 아쉽게도 삼전으로 리다리렉트되진 않고 도메인 판매사이트로 이동된다.

이후 URL을 퓨니코드로 인코딩해 열어주는 코드만 추가하니 문제가 해결되었다

 String link = selectedShip.link;
 if(!link.startsWith("http://") || !link.startsWith("https://"))
 	link = "http://" + IDN.toASCII(link);
 else
 	link = "http://" + IDN.toASCII(link.split("//")[1]);
Log.d("link", link);
Intent browserIntent = new Intent(Intent.ACTION_VIEW,
Uri.parse(link));

[ 해당글은 https://blog.bass9030.dev/post/14 에서 이전된 글입니다 ]

[Android] Intent로 웹페이지를 열면 웹뷰 충돌이 발생할때

아버지가 부탁하신 선박검색앱의 버그도 어느정도 잡았고, 자동 업데이트도 구현해놔서 이제 버그는 없겠지하고 안심하고 있었는데 아뿔싸.. 아버지가 어느 선사의 웹페이지가 켜지지 않고 위

blog.bass9030.dev

[Web] form 태그에서 js 추가 안하고 원하는 페이지로 리다이렉트하기

bass9030 — Thu, 1 Apr 2021 21:37:39 +0900

최근 express로 블로그를 만드는 뻘짓을 하고 있는데 절때 건들일이 없을거 같은 로그인 페이지에 손댈게 생겼다.

바로 로그인후 리다이렉트할 페이지를 넣는것..!

이렇게 요청을 보내고 여기서 로그인을 마치면 redir인자에 있는 /write 페이지로 이동하는 식이다.

그런데 문제가 하나있다.

로그인 페이지가 html(정확히는 ejs)로만 이루어져 있다.

login.ejs

<!DOCTYPE html>
<html lang="ko">
<head>
    <link href="/css/login.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/darkmode.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <%- include('nav', {login: login}) %>
    <div id="loginForm">
        <h3>로그인</h3>
        <p>블로그 운영자 확인용 로그인입니다.</p>
        <% if(wrong) { %>
            <p style="color: red; font-size: 10px;">아이디 혹은 비밀번호를 잘못 입력했습니다.</p>
        <% } %>
        <form action="/login" method="POST">
            <table>
                <tr>
                    <td>ID : </td>
                    <td><input type="text" name="id"></td>
                </tr>
                <tr>
                    <td>PW : </td>
                    <td><input type="password" name="password"></td>
                </tr>
                <tr>
                    <td><input type="submit" value="로그인"></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

login.js

router.post('/', function(req, res, next) {
    var body = req.body;
    var inputpass = crypto.createHash("sha512").update(body.password).digest("hex");
    if(body.id == 'id' && inputpass == 'sha512 hash pw') {
        req.session.userinfo = body.id;
        req.session.isLogin = true;
        res.redirect('/');
    }else{
        res.render('login', {wrong: true, login: req.session.isLogin});
    }
});

form태그는 action에 있는 주소에 method에 있는 방법으로 페이지를 요청해 이동시키기에 별도의 js를 쓰지 않는 이상 form안에 input으로만 인자를 넘겨줘야 한다.

(예시로 태그가<form action="/test" method="GET"><input type="text" name="id"></form>이면 tistory.com/login?id=(input value)로 get요청을 보내는 것이다.)

이때 XHR로 요청을 보내게 만들었어야 하는데 블로그를 만들기로 마음 먹고 로그인 폼을 만들때만 해도 웹 개발 지식을 거의 몰랐기에 그냥 프론트 엔드에서 login으로 리다이액션만 하게 해놓고 백엔드에서 리다이렉트을 시켰다..

따라서 저 form에서 리다이렉트를 시킬 웹 주소를 넘겨줘야 한다.

방법은 쉽다. html코드에 숨겨진 input를 만든 후, 거기다가 리다이렉트할 주소를 넣어주면 된다.

login.ejs

<!DOCTYPE html>
<html lang="ko">
<head>
    <link href="/css/login.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/darkmode.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <%- include('nav', {login: login}) %>
    <div id="loginForm">
        <h3>로그인</h3>
        <p>블로그 운영자 확인용 로그인입니다.</p>
        <% if(wrong) { %>
            <p style="color: red; font-size: 10px;">아이디 혹은 비밀번호를 잘못 입력했습니다.</p>
        <% } %>
        <form action="/login" method="POST">
            <input type="text" name="redir" style="display: none;" value="<%=redir%>"/>
            <table>
                <tr>
                    <td>ID : </td>
                    <td><input type="text" name="id"></td>
                </tr>
                <tr>
                    <td>PW : </td>
                    <td><input type="password" name="password"></td>
                </tr>
                <tr>
                    <td><input type="submit" value="로그인"></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

login.js

var createError = require('http-errors');
var express = require('express');
var router = express.Router();
var crypto = require('crypto');

/* GET login page. */
router.get('/', function(req, res, next) {
    res.render('login', {wrong:false, login: req.session.isLogin, redir: (req.query.redir ? req.query.redir : '')});
});

router.post('/', function(req, res, next) {
    var body = req.body;
    var inputpass = crypto.createHash("sha512").update(body.password).digest("hex");
    if(body.id == 'id' && inputpass == 'sha512 hash pw') {
        req.session.userinfo = body.id;
        req.session.isLogin = true;
        res.redirect((req.body.redir ? req.body.redir : '/'));
    }else{
        res.render('login', {wrong: true, login: req.session.isLogin, redir: (req.query.redir ? req.query.redir : '')});
    }
});

module.exports = router;

이제 로그인을 하면 redir에 들어간 주소로 정상적으로 이동이 된다 :)

#4 - 진짜 끝..?

bass9030 — Tue, 27 Oct 2020 18:17:24 +0900

등교개학 시작한 베스다. 야발

뭐 아무튼 딱히 할말 없으니 이전글 확인할 사람은 확인하고 바로 시작하겠다.

2020/10/22 - [뻘짓 프로젝트/휴대폰에서 리눅스 서버 돌리기] - #2 - 어차피 게임 섭은...

2020/10/25 - [뻘짓 프로젝트/휴대폰에서 리눅스 서버 돌리기] - #3 - 끝..?

전글에서 만들었던 마크 서버는 잘 돌아가고 있다.

램은 1기가로 늘렸는데 총 램 사용량이 60%대에서 80%대까지 올라간것 빼곤 딱히 없다.

아무튼 이제 개판난 linux deploy를 다시 설정해보자.

밑에 "지금 무료: Lavers of Fear 2" 겁나 거슬리네

이제 설정을 시작해보자.

일단 ENV환경부터 업데이트 한다.

업데이트가 완료되었으니 설치방법을 건들자

설치 경로를 SD카드로 바꾸고..

사용자 이름은 root(root로 안하면 관리자 권한이 필요한 작업을 sudo를 붙여도 안되는 이슈가 있음),

사용자 패스워드는 자신이 원하는것으로 한다.

마운트는 외장 sd카드와 내장 메모리로 설정한다.

ssh는 당근 활성화 해주면 설정은 얼추 끝난다.

(원하는 분들은 GUI 환경을 활성화해서 vnc에 접속할수도 있는데, 전 귀찮으니 패스하겠습니다.)

이제 설치를 진행해본다.

ㅓ라라..?

이런경우는 대부분 이미지 크기 문제이므로 이미지 크기를 2000MB(2GB)로 수정후 계속해준다.

다행히 잘 돌아간다.

설치가 완료됐다.

이제 ssh 연결해서 마저 설정하면 된다.

잘 마운트 됐고 잘 켜졌다.

이제 ssh 연결만 하고 아파치 깔고 설정할꺼 하면 끝난다 히히

git bash 그리웠다.. 그동안 teamviewer로만 작업해서 답답했는데, 이제 좀 편안하다.

이제 apache2와 빔~~(액션 비이임)~~을 깔아준다.

설치가 다됐으면 윈도우 환경에 백업해논 파일들을 넣어준다.

그리고 이제 한가지 설정을 해주면 되는데, 문제가 멍청하게 그 설정파일을 백업하지 않았다..

그래서 다시 기억을 더듬어보자.

아마 그 설정이 같은 호스트에서 다른 도메인으로 엑세스 하게 하는 설정인데.. 일단 검색과 기억으로 잘 설정을 완료했다.

이제 이번 시리즈는 여기서 끝내도록 하겠ㄷ

과연 인간, 여기가 상상력의 한계인가?

댓츠노노, 그렇지 않다.