이나당

감자 개발자의 2025년 회고

이나당 — Tue, 23 Dec 2025 21:06:07 +0900

2022년 11월 1일 현재 회사에 입사 후 드디어 3년이 지났다. 2025년에 경험한 것들을 정리하고 앞으로의 계획을 다시 새겨보는 시간을 가져보려한다.

2025 타임라인

상반기

2024년 이어서 진행중인 프로젝트

- 한방병원 알림톡

병원측 사정으로 인해 테스트가 밀려서 오픈도 미뤄졌다. 오픈이 미뤄지면서 요구사항등이 자꾸자꾸 나오고, 예외상황들도 더 많아지고 기존에 없던 케이스들도 추가하게되어서 테스트가 더 오래 걸렸다. 그래도 막상 오픈하고나니 오픈 후 첫 달 정도만 로그분석 들어오고 이후에는 운영이슈 0% 기록중. 사용량은 많은데 이슈가 없어서 사용자들이 편하게 쓰고 있다고 생각하니 매우 뿌듯했다.

케이스가 복잡한 시나리오가 많아서 README.md랑 JSDoc을 엄청 꼼꼼하게 달아두고 커밋내용도 육하원칙으로 쓰려고 신경을 많이 썼던 프로젝트

- EMR 태블릿 앱

원래는 4분기에 개발하고 소스 자체를 인수인계 하기로 한 프로젝트인데, 그 업체에서 운영인력을 구하지못해서 6개월 유지보수 추가 요청을 주셨다. (추가개발도 ㅎ) 회사에서 사용해보지 않던 기능들을 만들어 볼 수 있어서 좋았다. 탭구성이나 화면 형태 외의 html을 만들어서 PDF로 저장하기도하고 구글 북마크처럼 즐겨찾기기능도 만들어보고 재밌었다. 마지막 인수인계때는 회사에서 그동안 문서를 그렇게까지 많이 해본적이 없는데 업체에서 요청한 완료보고 문서들이 많아서 조금 허덕였지만 그래도 무사히 마무리-

해당 업체 본부장님이 인수인계끝나고 회식하면서 '그동안 외주할 때 이렇게 쫑파티를 한적이 없는데 정말 잘해줘서 식사자리 마련했다. 본인들의 작업에 자랑스러워 해도된다.'라고 말해주셔서 진짜 ㄹㅇ 완전 감동이었다. 이런 말 한마디마디에 또 에너지를 얻고 일하게 되는것같다. :D

새로운 프로젝트

- 한방병원 식수개발 기획

새로운 한방병원이.. 소문으로만.. 들어올거다 했는데 진짜 훅 들어왔다. 말도안되는 어지러운 기간과 함께.

갑분기. 갑자기 통합관리시스템(환자, 식수, 진료예약, 물리치료 등), 키오스크, 알림톡 기획(!!!!!!!)을 맡게되었다.

현재 그 병원은 수기, 또는 스프레드시트로 식사와 치료, 그리고 상담예약을 관리하고 있고 CS나 환자관리는 각각의 개인 솔루션업체를 사용하고 있어 원무에서 한 환자를 볼때 4-5개의 창을 봐야하는 불편함이 있다고 하셨다.

해당 부분을 최대한 1-2개로 줄일 수 있도록 관리시스템을 구축하면서 가장 급한 식수(병원식)관리 키오스크와 알림톡 기획을 같이 맡게되었다. 담당하는 원무선생님이 매우 의욕적이어서 figma도 공부하면서 기획 ppt를 만들었다. 하지만 이후에 아래의 고도화 앱에 투입되면서 기획은 여기까지만 하고 다른분에게 넘어가게 되었다.

그 이후에는 팔로업을 가-끔 도와주는 정도로만 관여하게되었고 중간에 해당 프로젝트 담당하던 사람 한 명이 이탈이 있어서 오픈일정에 차질도 생기고 남아있는 팀원이 진짜 힘들어했다. 기능을 3차까지 나눠서 오픈하기로 변경되었는데, 부디 3차까지 잘 마무리 되기를 ...

- 기존 사용중인 병원 앱 고도화 및 장차법 적용

기존에 사용중인 앱 중 하나를 고도화 하고싶다는 의뢰가 들어왔다. 고도화를 하면서 디자인도 새로 개편하고 장차법(장애인차별금지법)적용을 원하셨다. 그래서 기존 기능개선 + 고대비 + 글씨크기에 따른 화면 조절 기능을 추가하게 되었다.

처음엔 이렇게 장차법만 추가였긴한데, 결국 지금(6월 말)은 + 입원수속알림톡, 주차현황 등등등 막 늘어나고 있긴하다 :D ㅋㅋ

기존에 네이티브(Java+Kotlin & Swift), 스프링부트(Java) 로 만들어진 프로젝트를 이번엔 네이티브(Kotlin & Swift)와 리액트(Javascript)로 고도화를 진행하고있다.

기존에는 네이티브에서 대부분 기능을 하고 마이메뉴 안에 있는 추가 페이지 일부를 스프링 부트 웹을 사용했는데, 이번에는 네이티브에서 관리하는 부분을 정말 최소한으로 줄였다. 수정사항이 있을때 심사를 넣어야 하는것보다 브라우저 수정하고 서버에서 배포하는게 훨씬 유지보수할 때 편하기 때문에, 그리고 네이티브 수정하려면 두군데를 바꿔야해서 이번에는 최대한 브라우저에서 많은 기능이 돌아가도록 개편했다.

하지만 이전에는 수납기능이 없고 대부분 전산 + 백엔드와 주고받는 api 기능들이 전부라서 문제가 없었는데.. 외부 업체 연동이 끼니까 이슈가 생기긴해서 네이티브 수정이 좀 있긴 했다. (코쓱) 해당 부분은 별도의 포스팅으로 정리 해두었다。

[React&Kotlin] 웹-네이티브 브리지를 활용한 PG 결제 연동 구조 설계기 - 안드로이드 편

문제의 시작 현재 회사에서 안드로이드 앱들은 MainActivity에서 WebView를 활용해 React로 개발된 웹 화면을 네이티브 앱 내에 띄워서 표시하고 있다. 이전까지는 대부분 외부업체와의 연동이 없고 병

h-owo-ld.tistory.com

[React&iOS] 웹-네이티브 브리지를 활용한 PG 결제 연동 구조 설계기 - iOS 편

문제의 시작현재 회사에서 안드로이드 앱들은 MainActivity에서 WebView를 활용해 웹 화면을 네이티브 앱 내에 띄워서 표시하고 있다. 이전까지는 대부분 외부 연동이 없는 조회 형태라서 특별한 문

h-owo-ld.tistory.com

하반기

- 환자의 삶

7월부터 갑자기 매달 병이 터졌다 이석증에 코로나에 감기에 심재성2도화상에 디스크손상에 눈이상에.. 진짜 온몸이 난리가 나서 실비가 없었으면 저축1도못하고 그냥 가난뱅이 될뻔

- 기존 사용중인 병원 알림톡페이지 고도화 및 추가개발 & 외래최적화 LBS(위치기반서비스) 연동지원

상반기 병원앱 고도화 및 장차법 적용을 끝내고 해당 프로젝트의 연장선으로 기존에 서비스중인 기능 2개 페이지를 최신 알림톡 페이지로 UI를 바꿔주고, 추가 기능들을 넣었다. 알림톡페이지는 다른 병원들에서 많이 했던거라 크게 어렵지 않을 걸로 예상되는데 그중에 마음에 걸리는거라면 다른 알림톡 서비스 업체와 연계해서 공동으로 API를 맞춰야 하는부분이 매끄럽기를 바라는 마음!

외래최적화 LBS는 비콘 연계 서비스로 네이티브에서 해당 서비스를 활성화 해서 병원을 이용하는동안 자동으로 위치에 맞게 푸시알림을 보내주는 서비스다. 해당 부분에서 네이티브 연동 및 푸시알림 종류에 따라 앱 내에 화면이동까지 지원을 해달라는 요청이 있어서 이것도 네이티브랑 웹뷰 모두 수정이 들어갈 예정. 아직 기능이 명확하게 나오지 않아서 대기중이지만 수정된 푸시알림 연동규격을 통해서 네이티브 브릿지로 웹뷰 알림팝업을 띄워주고 앱내 페이지 이동까지 기능구현이 가능한거는 확인완료 한 상태!

11월까지 LBS오픈과 알림톡을 마무리하고 10월에 새로 들어오신 경력직 팀원분에게 인수인계를 했다.

- 새로운 팀원의 등장

10월 추석이 지나고 새로운 팀원이 들어왔다. 개발기간은 3-4년 정도인 중니어 개발자분이시고 이것저것 해보고 오셨다. 하지만 우리팀은 정말 "이것저것 개발팀"이기 때문에 적응하는데 조금 힘들어하셨다. 이전 회사는 깃도 커밋하려면 상사에게 컨펌받고 서버반영도 해주는분이 따로 있고 QA에 CS에 다 나눠져있는 회사였다하시는데,...

우리회사는 모든걸 스스로 해야하기때문에... 게다가 개발서버도 없는 병원도 많구.. 처음적응엔 힘들어하셨지만 12월말인 지금은 꽤나 적응하셔서 반영도 문서보고 척척 해내고 있으시당. 다행쓰

- Goodbye 나의 PTSD

심리상담을 받았다. 서울시 청년 마음지원사업에 선발돼서 상담 6회 지원이었는데, 상담과정중에 상담사분께서 필요한경우 10회까지 연장할 수 있는데 나의 경우 10회까지 연장하면 좋겠다고 해주셔서 총 10회기를 상담받게되었다.

상담계기는 회사에 새로들어온 기계측정에서 번아웃이 나와서.. 그리고 서울시 지원사업을 알게되어서 겸사겸사 지원한건데 생각보다 마음상태가 쓰레기 엉망진창이었다. ㅇ_ㅇ 상담사분이 처음 상담할때 위험군으로 분류되어있어서 상담하게 됐다고..하셔서 조금 놀랐다.

상담중에 과거 학교다닐때 당했던 따돌림 상황이랑 전팀장이 가스라이팅 하는상황이 오버랩돼서 PTSD 재경험이 생긴것 같다고 하셨다. 학창시절때 이야기를 웃으면서 할 수 있어서 극복했다. 괜찮다. 라고 생각했는데 아무래도 어릴때 있었던 일은 커서도 꽤나 영향을 지속적으로 주는가보다. 무튼 상담덕분에 PTSD라는것도 인지하고 치료도 받고 다양한 상황에서 대처할 수 있는 방법들도 알게되었다. 담당해주신 상담사분은 인지치료 위주로 진행해주신 것 같았다. 상담받으면서 '음 그게 어떤이유에서 나당씨한테 중요한 부분일까요?'라는 질문이라던지 내 신체반응이나 그때의 상황탐색 그리고 메타인지를 할 수 있게 많이 도와주셨고 상담이 끝난 지금 엄청 많이 해소되어서 회사에서 내 역할에 대한 강박도 많이 줄어들어서 마음이 편해졌다. 우울이 너무 깊은상태라서 아무것도 안하고 싶고 해야하는데 의욕이 없어서 더 스트레스 받는 굴레에 갇혀있었는데 상담사분이 우울이 사라지면서 알아서 원래 기질대로 하고싶은 충동들이나 욕구들이 올라올거라 해주셨는데, 연말인 지금은 해보고 싶은것들이 조오금씩 생각나고 있어서 (회고도 갑자기 생각남 ㅎ) 내년이 기대되게됐다. 앞으로도 어린시절의 환경들이 영향을 줄테지만 그런 상황에서도 나를 지키기위해 꾸준히 숲을보고 메타인지를 하는 시간을 가지라고 조언해주셨다.

- 벌써 줄서고있는 2026업무와 회사이사

현팀장님이랑 업무 정리중인데 벌써 2026년 업무가 그득그득 찼다는게 어이가 없

지금 다니는 회사가 합병중인데 그중 한 회사의 사무실이 이사를 가야하는 상황이라 두 회사 모두 이사를 가게되었다. 근데 위치가 가산이야. 진짜 에바다. 회색커닝시티라니. 정말정말 맘에 안들지만 긍정적으로 생각해서 출퇴근이 힘들면 이직하려는 공부를 좀더 열심히 하지않을까? 라고 희망긍정회로를 이상하게 돌리는중. ㅎㅎㅎㅎ

머 어케든 되겠지 일단 다녀보고 다시 생각하자~

- 조용히 올라가고 있는 OTT JUMP의 사용자

뭔가 처음 만든 웹스토어고 내가 필요해서 만든거라 부끄러워서 주변에 많이 안알리고 조용히 나만 쓰고 있는데

그래도 꾸준히 사용자가 올라가고 있다.. (감덩)

오류문의 메일이 안오고 있어서.. 다들 잘 쓰고 있낭..? 싶기도하고.. 다행이기도하고.. 다들 편하게 썼으면 <3

힘들었던 가스라이팅의 3년 생활이 지나고 전팀장 퇴사와 기막힌 타이밍의 심리상담 덕분에 2026년은 좀더 밝은 분위기로 보낼거라는 기대가 생겨서.. 2026의 회고는 어떨지 궁금하다.

내년 회고는 좀더 새롭고 즐거운 이야기들이 많아서 스크롤이 왕창 생겼으면 좋겠다!

[OTT JUMP] 크롬 웹 스토어 개발자 등록하기 & OTT JUMP 웹스토어 등록 완료!

이나당 — Sat, 30 Aug 2025 18:28:25 +0900

혼자 잘 쓰고 있었는데, 무니도 웨이브 자동 넘기기가 필요하대서 드디어 으쌰으쌰 하면서 크롬 웹스토어 개발자 등록을 했다.

추가하는김에 네이버멤버십중이라 넷플릭스도 호다닥!

Chrome Web Store

로그인 Chrome 웹 스토어로 이동

accounts.google.com

일단 크롬 웹스토어를 접속

접속하면 돈을 내라고 한다.

카드를 등록하고 돈을 낸다.

등록비용은 $5

한국이 없어서 그냥 미국으로 하고 구글 우편번호 입력했따 ㅇ_ㅇ

돈내고 들어온 첫화면!

저기 오른쪽 위에 '새 항목'을 선택하여 압축한 파일을 올려준다.

manifest.json에 경로를 ./을 넣었더니 저렇게 오류가 떴다. 경로에 ./ 를 지울것!

설명을 입력하고 쭉쭉쭉 스토어 리스팅 부분을 적은후에 '초안 저장' 을 눌러준다.

그러면 '초안 저장' 버튼 왼쪽에 '왜 제출할 수 없나요?'라는 텍스트가 생기는데 이걸 누르면

채워야할 부분들을 설명해준다.

해당부분 따라가서 적어준다.

다 적어주면 제출 할 수 있는 버튼이 활성화된다.

앱배포때도 항상 자동배포를 안하고 있으므로

이번 웹스토어 배포도 자동배포는 체크하지 않았다.

검토 대기 중 (25.08.18)

25.08.30

승인됐다는 메일이 없어서 들어가보니 심사 승인됐다!

OTT JUMP - Chrome 웹 스토어

OTT 오프닝 건너뛰기랑 다음회차를 자동으로 재생해주는 크롬 확장 프로그램이에요! 현재는 웨이브와 티빙, 그리고 넷플릭스가 가능합니다.

chromewebstore.google.com

[React&iOS] 웹-네이티브 브리지를 활용한 PG 결제 연동 구조 설계기 - iOS 편

이나당 — Fri, 1 Aug 2025 18:54:20 +0900

문제의 시작

현재 회사에서 안드로이드 앱들은 MainActivity에서 WebView를 활용해 웹 화면을 네이티브 앱 내에 띄워서 표시하고 있다. 이전까지는 대부분 외부 연동이 없는 조회 형태라서 특별한 문제가 없었다. 하지만 이번에 결제기능이 추가되면서.. 문제가생겼다.

결제 수단을 선택하고 그대로 프로세스를 진행하지않고 뒤로가기버튼을 선택한 경우, 앱내 웹뷰로 다시 돌아오지 않았다.

사담을 좀 하자면.. 최근 회사 상황이 꽤나 정신없다. 기존 팀장님께서 퇴사를 선언하신 뒤 사실상 칩거 상태에 들어가셨고(ㅠ) 이후 월초에 새로 채용된 팀장님도 하루 만에 퇴사를 결정하면서 팀장 자리는 공석이다.

현재 팀 구성은 총 4명으로 나, 입사 동기, 2년 차 백엔드 개발자, 신입 프론트엔드 개발자 이렇게만 남아 있는 상황이다.

그렇기에 팀장님이 없는 상태에서 의사결정이나 기술 논의가 쉽지 않았다. 특히 문제 해결 과정에서 누군가에게 조언을 받기는 어려운 상황에서 입사 동기와 이야기하던 중 두 가지 해결 방향이 나왔지만 각각 단점이 있어 쉽게 결정할 수 없었다.

그러다 문득 평소 자주보는 오픈카톡방이 떠올랐고 고민 끝에 두 군데에 상황을 올려보았다.

그 중 한 방에서 비슷한 이슈를 겪고 해결한 분의 조언을 받을 수 있었고, 정말 큰 도움이 되었다. (갓...ㅠㅠ)

조언을 바탕으로 적용한 해결책은 아래와 같다.

개선방법

Android 개선방법

안드로이드에서는 MainWebView 외 결제 수단용으로 별도의 자식 WebView(PGWebViewActivity)를 하나 더 만들어 결제요청 시 자식 WebView를 띄우고 뒤로가기 버튼을 누르면 해당 WebView를 닫아 다시 부모 WebView로 돌아올 수 있도록 구성했다. 이 방식으로 팝업 결제 페이지의 흐름을 안정적으로 처리할 수 있었다. 또한 뒤로가기 뿐 아니라 승인까지 진행하는 프로세스 결과도 MainActivity에서 전달받을 수 있는 구조로 개선했다.

[React&Kotlin] 웹-네이티브 브리지를 활용한 PG 결제 연동 구조 설계기 - 안드로이드 편

h-owo-ld.tistory.com

iOS 개선방법

iOS 역시 비슷한 방식으로 자식 WebView를 사용하는 구조이지만 기기 특성상 하드웨어 뒤로가기 버튼이 없기 때문에 상단에 커스텀 뒤로가기 버튼을 별도로 추가해주는 작업을 덧붙였다.

모바일의 갓 핑관님 덕분에 꽤나 복잡했던 결제 플로우 문제를 안정적으로 처리할 수 있었고 무엇보다도 커뮤니티의 힘이 얼마나 큰지를 다시 한 번 느낄 수 있었다.

iOS 개선방법 상세 코드

/// ViewController

...
class ViewController: UIViewController,
                      CLLocationManagerDelegate,
                      CBCentralManagerDelegate,
                      WKNavigationDelegate,
                      WKScriptMessageHandler,
                      WKUIDelegate,
                      PGWebViewControllerDelegate {    
    
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
...
      // 결제 시 결제전용 웹뷰를 열도록 하는 브릿지 함수
        case "openPGWebView":
            Logger.log(self, "openPgWebView")
            print("[PRINT DEBUG] openPgWebView message.body: \(String(describing: message.body))")
            
            // JS Bridge로부터 받은 message.body가 String(결제 URL)인지 확인, URL 타입으로 변환 시도
            guard let link = message.body as? String, let url = URL(string: link) else {
                Logger.log(self, "PGWebView: 잘못된 URL \(String(describing: message.body))")
                return
            }
            
            // JS Bridge로부터 받은 message.body가 String(결제 URL)인지 확인, URL 타입으로 변환 시도
            let storyboard = UIStoryboard(name: "Main", bundle: nil)
            if let pgVC = storyboard.instantiateViewController(withIdentifier: "PGWebViewController") as? PGWebViewController {
                
                // 결제 URL 및 delegate(콜백 받을 부모 컨트롤러) 주입
                pgVC.pgUrl = url // 원하는 결제 URL 전달
                pgVC.delegate = self
                
                // 결제창을 UINavigationController로 감싸서 present (상단에 네비게이션바, 뒤로가기 가능)
                let nav = UINavigationController(rootViewController: pgVC)
                nav.modalPresentationStyle = .fullScreen // 전체화면 모달로 띄움(iOS 기본은 half-modal이니 꼭 명시)
                present(nav, animated: true)
            }
        }
    ...
    // 결제승인 URL 콜백
    func pgWebViewControllerDidFinish(url:URL){
        Logger.log(self, "[PGWebView] 승인 URL 반환:", url)
        // 바로 부모 WKWebView에서 페이지 이동!
        webView.load(URLRequest(url: url))
    }
}

리액트에서 openPGWebView 라는 브릿지메시지를 보내면 해당 메시지 내의 url을 PGWebViewController로 보내준다. 이때 iOS의 경우는 뒤로가기 버튼이 따로없기때문에 별도로 상단에 navigation바에 뒤로가기 버튼을 추가해줬고, iOS에서는 모달이 기본적으로 half로 띄워지기 때문에 명시적으로 풀스크린을 지정해서 전체화면으로 띄우도록 했다.

이후 결제가 성공적으로 완료되면 결제승인 콜백을 통해 부모컨트롤러인 해당 컨트롤러로 승인 URL이 다시 전달된다. 전달받은 URL은 기존의 메인웹뷰에서 다시 로딩되어 웹페이지 흐름이 이어지게 된다.

// PGWebViewController
...

/// 결제 전용 WebView의 결과를 콜백받기 위한 프로토콜
protocol PGWebViewControllerDelegate: AnyObject {
    /// 결제 성공 또는 승인 URL이 감지된 경우 호출됨
    func pgWebViewControllerDidFinish(url: URL)
    /// 사용자가 [<-] 뒤로가기/닫기 버튼을 눌러 결제창을 닫은 경우 호출됨
    func pgWebViewControllerDidCancel()
}

/// PG(결제) 전용 웹뷰 컨트롤러
class PGWebViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {
    /// 결제 URL (외부에서 반드시 할당해야 함)
    var pgUrl: URL!
    weak var delegate: PGWebViewControllerDelegate?
    private var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        print("[PGWebView] viewDidLoad - pgUrl:", pgUrl ?? "nil")
        
        // WebView 환경설정: JS, 여러창 등 활성화
        let config = WKWebViewConfiguration()
        config.preferences.javaScriptEnabled = true
        config.preferences.javaScriptCanOpenWindowsAutomatically = true
        
        // WebView 인스턴스 생성 및 설정
        webView = WKWebView(frame: self.view.bounds, configuration: config)
        webView.navigationDelegate = self
        webView.uiDelegate = self
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        self.view.addSubview(webView)

        // 결제 URL 로드
        if let url = pgUrl {
            print("[PGWebView] loading URL:", url)
            webView.load(URLRequest(url: url))
        } else {
            print("[PGWebView] pgUrl is nil, cannot load webview")
        }

        print("[PGWebView] NavigationController?", navigationController != nil)
        print("[PGWebView] parent:", parent ?? "nil")
    }
    
    /// 상단 네비게이션 바의 [<-] 버튼 (Left bar button items)
    @IBAction func didTapBack(_ sender: Any) {
        delegate?.pgWebViewControllerDidCancel()
        dismiss(animated: true)
    }

    /// 네비게이션 이벤트 감지(결제 승인/에러/카드앱 딥링크 등 처리)
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        guard let url = navigationAction.request.url else {
            print("[PGWebView] navigationAction: url is nil")
            decisionHandler(.allow)
            return
        }
        print("[PGWebView] navigating to:", url)

        // 결제 승인/에러 리턴 URL 감지
        if url.absoluteString.contains("/approval") {
            print("[PGWebView] approval detected, dismissing")
            delegate?.pgWebViewControllerDidFinish(url: url)
            self.dismiss(animated: true)
            decisionHandler(.cancel)
            return
        }

        // 카드/간편결제/은행 앱 등 외부앱 연동 스킴 감지시, 시스템으로 오픈
        if let scheme = url.scheme, paymentSchemes.contains(scheme) {
            print("[PGWebView] open external scheme:", scheme)
            UIApplication.shared.open(url)
            decisionHandler(.cancel)
            return
        }

        // 그 외는 웹뷰 기본동작
        decisionHandler(.allow)
    }
    ...
    
}

...

리액트에서 요청하면 메인을 거쳐 열리는 결제 웹뷰 페이지 컨트롤러다.

해당 컨트롤러에서는 외부로부터 전달받은 결제 URL을 로딩하고 결제 흐름중 발생하는 승인 완료나 간편결제 같은 외부 앱 호출 같은 이벤트를 감지해서 처리하게 된다.

리액트에서 사용한 브릿지코드

/**
 * 모바일 네이티브의 `openPGWebView` 메서드 호출.
 *
 * @method openPGWebView
 * @param {String} link pg호출을 위해 별도의 웹뷰를 띄우는 URL.
 */
const openPGWebView = (link) => {
  if (mobile.isMobile) {
    if (mobile.isAndroid) {
      if (window?.androidWebBridge?.openPGWebView) {
        window.androidWebBridge.openPGWebView(link)
      } else {
        window.open(link)
      }
    } else if (mobile.isIOS) {
      if (window?.webkit?.messageHandlers?.openPGWebView) {
        window.webkit.messageHandlers.openPGWebView.postMessage(link)
      } else {
        window.open(link)
      }
    }
  } else {
    window.open(link)
  }
}

결과

이제 뒤로가기 버튼을 눌러도 다시 원래 페이지로 복귀가 자연스럽게 된다.

결제 시나리오 완료후에도 메인 뷰로 승인결과를 URL에 담아서 가져오게되었다.

동기랑 다음에는 앱개발 하게되면 RN를 진지하게 고려해보자는 이야기를 했다.

[React&Kotlin] 웹-네이티브 브리지를 활용한 PG 결제 연동 구조 설계기 - 안드로이드 편

이나당 — Tue, 24 Jun 2025 17:35:41 +0900

문제의 시작

현재 회사에서 안드로이드 앱들은 MainActivity에서 WebView를 활용해 React로 개발된 웹 화면을 네이티브 앱 내에 띄워서 표시하고 있다. 이전까지는 대부분 외부업체와의 연동이 없고 병원 전산팀과 연동하는 형태라서 특별한 문제가 없었다. 하지만 이번에 결제기능이 추가되면서.. 문제가생겼다.

결제 수단을 선택하고 그대로 프로세스를 진행하지않고 뒤로가기버튼을 선택한 경우, 앱내 웹뷰로 다시 돌아오지 않았다.

문제 상황

    override fun onBackPressed() {
        Logger.debug()

        webView.evaluateJavascript("historyBack();") {
            if (it?.toString() == "1") {
                super.onBackPressed()
            }
        }
    }

안드로이드의 뒤로가기 버튼을 눌렀을 때 WebView에서는 historyBack() 자바스크립트 함수를 실행하고 그 리턴값에 따라 동작을 분기하도록 구성되어 있다. 하지만 수납 페이지처럼 외부에서 호출된 URL의 경우 해당 함수(historyBack)가 정의되어 있지 않기 때문에 함수 실행 시 웹 디버깅 콘솔에 "함수가 존재하지 않는다"는 오류가 출력되며 뒤로가기가 정상적으로 동작하지 않는 문제가 발생하게 됐다.

현재 팀 구성은 총 4명으로 나, 입사 동기, 2년 차 백엔드 개발자, 신입 프론트엔드 개발자 이렇게만 남아 있는 상황이다.

그러다 문득 평소 자주보는 오픈카톡방이 떠올랐고 고민 끝에 두 군데에 상황을 올려보았다.

그 중 한 방에서 비슷한 이슈를 겪고 해결한 분의 조언을 받을 수 있었고, 정말 큰 도움이 되었다. (갓...ㅠㅠ)

조언을 바탕으로 적용한 해결책은 아래와 같다.

개선방법

Android 개선방법

iOS 개선방법

iOS 역시 비슷한 방식으로 자식 WebView를 사용하는 구조이지만 기기 특성상 하드웨어 뒤로가기 버튼이 없기 때문에 상단에 커스텀 뒤로가기 버튼을 별도로 추가해주는 작업을 덧붙였다. (iOS 관련 내용은 따로 포스팅할 예정)

안드로이드 개선방법 상세 코드

// MainActivity.kt
... 
class MainActivity : AppCompatActivity()  {
     private val pgLauncher = registerForActivityResult(ActivityResultContracts.StartActivityForResult()) { result: ActivityResult ->
        if (result.resultCode == Activity.RESULT_OK) {
            val approvalUrl = result.data?.getStringExtra("approval_url")
            Logger.debug("PG 승인 URL 받음: $approvalUrl")
            if (!approvalUrl.isNullOrEmpty()) {
                webView.loadUrl(approvalUrl)
            }
        }
    }
...
    inner class WebBridgeClass {
   		@JavascriptInterface
        fun openPGWebView(url:String){
            Logger.debug(" openPGWebView: $url")
            val intent = Intent(this@MainActivity, PGWebViewActivity::class.java)
            intent.putExtra("pg_url",url)
            Logger.debug(" PGWebViewActivity onCreate() called!!!")

            (this@MainActivity as MainActivity).pgLauncher.launch(intent)
        }
...

먼저 아래의 WebBridgeClass 안의 openPGWebView함수를 통해 웹에서 PG 결제 URL을 넘기면 안드로이드에서 해당 URL을 Intent로 감싸서 PGWebViewActivity로 이동하도록 구현하는 웹-네이티브 연동 브리지를 추가해줬다.

결제는 외부 PG사 페이지로 이동하게 되므로 이후 결제가 끝나면 PGWebViewActivity에서 MainActivity에 선언된 ActivityResultLauncher를 통해 결제 결과를 받아오는 구조를 추가해줬다.

// PGWebViewActivity.kt
...

class PGWebViewActivity : AppCompatActivity() {
    private lateinit var webView: WebView

    @SuppressLint("SetJavaScriptEnabled", "MissingInflatedId")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_pgwebview)

        // (1) Lollipop 이하 호환용 - 쿠키 동기화 매니저 초기화
        @Suppress("DEPRECATION")
        CookieSyncManager.createInstance(this)

        // (2) Safe Area 대응 (상단/하단 시스템 영역 패딩 적용)
        val webviewContainer = findViewById<FrameLayout>(R.id.webviewContainer2)
        ViewCompat.setOnApplyWindowInsetsListener(webviewContainer) { v, insets ->
            val sysInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(0, sysInsets.top, 0, sysInsets.bottom)
            insets
        }

        // (3) Android 11(R) 이상에서 전체화면 표시 설정
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            window.setDecorFitsSystemWindows(false)
        }

        // (4) 상태바 배경색/아이콘 색상 설정 (화이트 배경 + 다크 아이콘)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            window.statusBarColor = Color.WHITE
            window.decorView.systemUiVisibility =
                window.decorView.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
        }

        // (5) PG 결제 페이지 URL 인텐트로 전달받기
        val pgUrl = intent.getStringExtra("pg_url")
        Logger.debug(" pgUrl: $pgUrl")

        // (6) WebView 초기 설정
        webView = findViewById(R.id.pgWebView)
        webView.settings.javaScriptEnabled = true // 자바스크립트 허용
        webView.settings.setSupportMultipleWindows(true) // 다중창 지원
        webView.settings.javaScriptCanOpenWindowsAutomatically = true // JS에서 window.open 허용
        webView.settings.domStorageEnabled = true // localStorage 등 DOM 스토리지 허용

        // (7) Third-party 쿠키 허용 (PG 결제 시 필수)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true)
        }

        // (8) WebViewClient 설정 - URL 제어 및 외부앱/마켓 호출 처리
        webView.webViewClient = object : WebViewClient() {

            @Deprecated("Deprecated in Java")
            @Suppress("DEPRECATION")
            override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
                val url = request?.url.toString()
                Logger.debug(" [shouldOverrideUrlLoading] url=$url")

                // (8-1) 결제 승인 URL 처리
                if (url.contains("/approval")) {
                    val resultIntent = Intent()
                    resultIntent.putExtra("approval_url", url)
                    setResult(RESULT_OK, resultIntent)
                    finish()
                    return true
                }

                // (8-2) 전화 연결 처리
                if (url.startsWith("tel:")) {
                    startActivity(Intent(Intent.ACTION_DIAL, url.toUri()))
                    return true
                }

                // (8-3) 외부 앱 호출/마켓 이동 처리
                if (!URLUtil.isNetworkUrl(url) && !URLUtil.isJavaScriptUrl(url)) {
                    try {
                        val uri = Uri.parse(url)
                        if (uri.scheme == "intent") {
                            return startSchemeIntent(url)
                        } else {
                            startActivity(Intent(Intent.ACTION_VIEW, uri))
                            return true
                        }
                    } catch (e: Exception) {
                        return false
                    }
                }

                // (8-4) 기본 WebView 처리
                return false
            }

            override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
                super.onPageStarted(view, url, favicon)
                Logger.debug(" onPageStarted: $url")
            }

            override fun onPageFinished(view: WebView?, url: String?) {
                super.onPageFinished(view, url)
                Logger.debug(" onPageFinished: $url")
            }
        }

        // (9) 팝업 등 지원을 위한 WebChromeClient 등록
        webView.webChromeClient = WebChromeClient()

        // (10) PG 결제 페이지 로딩 시작
        if (!pgUrl.isNullOrEmpty()) {
            webView.loadUrl(pgUrl)
        }
    }

    // (11) intent:// 스킴 처리 메서드 (앱 호출 or 마켓 fallback)
    private fun startSchemeIntent(url: String): Boolean {
        return try {
            val schemeIntent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME)
            try {
                startActivity(schemeIntent)
                true
            } catch (e: ActivityNotFoundException) {
                val packageName = schemeIntent.`package`
                if (!packageName.isNullOrEmpty()) {
                    startActivity(Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=$packageName")))
                    true
                } else {
                    false
                }
            }
        } catch (e: URISyntaxException) {
            false
        }
    }

...

    // (14) 백버튼 → 결제 취소 처리
    @Deprecated("Deprecated in Java")
    @Suppress("DEPRECATION", "MissingSuperCall")
    override fun onBackPressed() {
        setResult(RESULT_CANCELED)
        finish()
    }
}

PGWebViewActivity는 결제에 필요한 PG URL을 인텐트로 전달받아서 화면이 표시된다.

주요 기능은 2가지이다.

1. /approval 등의 URL 탐지 시 setResult(RESULT_OK)와 함께 부모 액티비티에 복귀

2. intent://, ispmobile:// 등 다양한 스킴 처리 및 마켓 fallback 로직을 추가

OneUI 7.0부터는 상단, 하단 시스템 영역(노치, 소프트 키 등)에 대응이 필요해서 safe-area 패딩을 적용했고, Android 11 이상에서는 status/navigation bar가 화면 위에 그려지도록 window 설정을 추가했다. 이대로 했더니 시계가 다크모드에서는 제대로 안보이는 이슈가 생겨서 상태바 배경도 흰색으로 바꾸고 아이콘이랑 글씨는 검정색으로 바꿔서 가독성을 높였다.

그리고 코드 개선의 시작이었던.. 백버튼을 누르면 setResult(RESULT_CANCELED)로 결제 취소 결과를 돌려주고 액티비티를 종료하도록했다.

// activity_pgwebview.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".PGWebViewActivity">

    <FrameLayout
        android:id="@+id/webviewContainer2"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <WebView
            android:id="@+id/pgWebView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

activity_pgwebview.xml은 결제 전용 WebView 레이아웃을 위한 XML로 레이아웃 형태는 MainActivity와 똑같이 배치했다.

리액트에서 사용한 브릿지코드

/**
 * 모바일 네이티브의 `openPGWebView` 메서드 호출.
 *
 * @method openPGWebView
 * @param {String} link pg호출을 위해 별도의 웹뷰를 띄우는 URL.
 */
const openPGWebView = (link) => {
  if (mobile.isMobile) {
    if (mobile.isAndroid) {
      if (window?.androidWebBridge?.openPGWebView) {
        window.androidWebBridge.openPGWebView(link)
      } else {
        window.open(link)
      }
    } else if (mobile.isIOS) {
      if (window?.webkit?.messageHandlers?.openPGWebView) {
        window.webkit.messageHandlers.openPGWebView.postMessage(link)
      } else {
        window.open(link)
      }
    }
  } else {
    window.open(link)
  }
}

결과

이제 뒤로가기 버튼을 눌러도 다시 원래 페이지로 복귀가 자연스럽게 된다.

결제 시나리오 완료후에도 MainActivity로 승인결과를 URL에 담아서 가져오게되었다.

동기랑 다음에는 앱개발 하게되면 RN를 진지하게 고려해보자는 이야기를 했다.

[React] 25.04 기준 신규버전 카카오페이 연동하기

이나당 — Fri, 13 Jun 2025 22:20:09 +0900

새로 하는 프로젝트에 카카오페이가 들어가게 됐다. 기존에 했던거 복붙 하려했는데, 문서 읽어보니 카카오 디벨로퍼스에서 카카오페이 디벨로퍼스로 빠지면서 결제 API연동 방식 신규버전이 생긴것 같았다.

계정생성

카카오페이 | 개발자센터

새로운 기회와 가치를 함께 만들어봐요

developers.kakaopay.com

카카오페이 개발자센터 계정이 없어서 일단 계정부터 만들어줬다.

사전등록

애플리케이션 등록

아이콘 이미지와 앱 이름을 넣어서 등록한다.

Secret key(dev)발급

새로 만들어진 애플리케이션을 선택한 후 하단에 Secret key(dev) 발급 버튼을 누른다.

플랫폼등록

애플리케이션 - 플랫폼에 들어가서 Web부분에 테스트할 주소를 입력한다.

나는 localhost:3300으로 입력했다.

* 꼭 http부터 입력해 주어야한다.

http://36.46.31.221 (O)
http://localhost:8080/ (O)
http://127.0.0.1 (O)
https://example (X)
ftp://hello.world (X)
https://example.com/path1 (X) (path, query string, hash 허용하지 않음)
https://https://example.com (X)
https://example.com/path1?key1=value1#hash (X) (path, query string, hash 허용하지 않음)
https://example.com/ (X)
https://*.com (X)

이렇게 하면 디벨로퍼스 센터에서 설정할 사전작업들은 끝

연동하기 (테스트 기준)

결제준비

카카오페이 결제를 시작하기 위해 결제정보를 카카오페이 서버에 전달하고 결제 고유번호(TID)와 URL을 응답받는 단계입니다.

Secret key를 헤더에 담아 파라미터 값들과 함께 POST로 요청합니다.
요청이 성공하면 응답 바디에 JSON 객체로 다음 단계 진행을 위한 값들을 받습니다.
서버(Server)는 tid를 저장하고, 클라이언트는 사용자 환경에 맞는 URL로 리다이렉트(redirect)합니다.

import axios from 'axios'
import { config } from '../../components'
import { log } from '../../tools'

const TestKakaoPage = () => {
  const { REQUEST_URL, SECTRET_KEY, RETURN_URL } = config.constant.KAKAO
  
  const handleClick = async () => {
    try {
      const headers = {
        Authorization: 'SECRET_KEY ' + SECRET_KEY,
      }

      const payload = {
        cid: 'TC0ONETIME', // 가맹점코드
        partner_order_id: 'order1234', // 가맹점 주문번호
        partner_user_id: 'YI_SEVERANCE', // 가맹점회원id
        item_name: '초코파이', 
        quantity: 1,
        total_amount: 2200,
        tax_free_amount: 0, 
        approval_url: RETURN_URL, 
        fail_url: RETURN_URL, 
        cancel_url: RETURN_URL,
      }

      log.info('결제 등록 요청에 담긴 payload:', payload)
      
      const response = await axios.post(REQUEST_URL, payload, { headers })
      const mobileURL = config.constant.IS_PRODUCTION
        ? response.data.next_redirect_mobile_url // 사용자 모바일 환경
        : response.data.next_redirect_pc_url // pc 테스트용

      const tid = response.data.tid
      console.log(tid)
      setLocalStorage('tid', JSON.stringify(tid))

      location.href = mobileURL

    } catch (error) {
      log.error('API 호출 오류:: ', error)
    }
  }

  return (
    <div>
      <h2>테스트 Kakao</h2>
      <button onClick={handleClick}>요청</button>
    </div>
  )
}

export { TestKakaoPage }

import axios from 'axios'
import { useEffect, useState } from 'react'
import { config } from '../../components'
import { getLocalStorage, hasLocalStorage, queryParamToObject } from '../../tools'

const TestKakaoIngPage = () => {
  //http://localhost:3300/payment/kakao/ing?pg_token=토큰값
  const param = location.search
  const decodeKey = queryParamToObject(param)
  const { pg_token: pgToken } = decodeKey
  const { APPROVE_URL, PARKING_ADMIN_KEY } = config.constant.KAKAO
  const [status, setStatus] = useState('')
  
  useEffect(() => {
    if (!pgToken || !hasLocalStorage('tid')) {

      return
    }

    const fetchData = async () => {
      const headers = {
        Authorization: 'SECRET_KEY ' + PARKING_ADMIN_KEY,
      }

      const payload = {
        cid: 'TC0ONETIME', // 가맹점코드
        tid: getLocalStorage('tid'),
        partner_order_id: 'order1234', // 가맹점 주문번호 
        partner_user_id: 'YI_SEVERANCE', // 가맹점회원id
        pg_token: pgToken,
      }

      const response = await axios.post(APPROVE_URL, payload, { headers })

      setStatus(response.status)
    }

    fetchData()
  }, [decodeKey])

  return (
    <div>
      카카오페이 승인페이지
      {status === 200 && <p>성공</p>}
    </div>
  )
}

export { TestKakaoIngPage }

/**
*
* https://devtalk.kakao.com/t/msg-authentication-doesn-t-complete-code-701/114140
*카카오페이 테스트 결제 구현 중 발생한 에러 문의 (“msg”:“authentication doesn’t complete!”,“code”:-701)
*안녕하세요. 카카오페이 입니다.
*말씀하신 오류의 경우, 사용자인증완료전 승인요청(approve)가 인입되어 발생되는 현상이 맞습니다.
*다만 테스트 CID의 경우, 결제수단 선택후, 비밀번호인증/페이스인증 등이 skip 되어 진행되기때문에,
*내부인증완료 처리진행 approve요청이 들어올경우 드물게 발생하는 현상일 수있습니다.
*운영시에는 발생되지 않는점 참고부탁드립니다.
*감사합니다.
*/

참고

- https://developers.kakaopay.com/docs/getting-started/api-common-guide/prepare

- https://developers.kakaopay.com/docs/payment/online/single-payment

[Javscript/Rechart] x축 스크롤링 추가

이나당 — Sat, 3 May 2025 16:57:37 +0900

const CustomTick = (props) => {
  const { x, y, payload } = props
  const dateParts = payload.value.split('-') // ["2024", "12", "15"]

  return (
    <text
      x={x}
      y={y}
      textAnchor="front"
      fontSize={12}
      letterSpacing={-0.55}
      fontWeight={500}
      fill="#333"
    >
      <tspan x={x} dy="12">
        {dateParts[0]}년
      </tspan>
      <tspan x={x} dy="15">
        {dateParts[1]}월 {dateParts[2]}일
      </tspan>
    </text>
  )
}

const StatUsageStatus = ({ value }) => {
  ...코드생략 
  // x축 간격 조정 (4rem)
  const chartWidth =
    Math.max(chartData?.length * 64, 800) >=
    document?.querySelector('.ChartWrap')?.offsetWidth
      ? Math.max(chartData?.length * 64, 800)
      : '100%'

  return (
    <StatTabPanel value={value} index={0} className="StatUsageStatus">
		...코드생략
        <Box className="ChartBox">
          <Box className="ChartContent">
            <ResponsiveContainer width={chartWidth} height="100%">
              <AreaChart
                width={'100%'}
                height={500}
                data={chartData}
                margin={{
                  top: 10,
                  right: 60,
                  left: 0,
                  bottom: 30,
                }}
              >
                {/* ✅ SVG 그라데이션 정의 */}
                <defs>
                  {/* userCount 그래디언트 */}
                  <linearGradient
                    id="userCountGradient"
                    x1="0"
                    y1="0"
                    x2="0"
                    y2="1"
                  >
                    <stop offset="0%" stopColor="#f1bd44" stopOpacity={0.5} />
                    <stop offset="100%" stopColor="#f1bd44" stopOpacity={0} />
                  </linearGradient>
                  <linearGradient
                    id="preReviewCountGradient"
                    x1="0"
                    y1="0"
                    x2="0"
                    y2="1"
                  >
                    <stop offset="0%" stopColor="#53a9eb" stopOpacity={0.5} />
                    <stop offset="100%" stopColor="#53a9eb" stopOpacity={0} />
                  </linearGradient>
                </defs>
                <CartesianGrid vertical={false} />
                <XAxis
                  dataKey="date"
                  interval={0}
                  tick={<CustomTick />}
                  tickLine={false}
                />
                <YAxis stroke="#333" tickLine={false} />
                <Tooltip />
                <Area
                  dataKey="preReviewCount"
                  dot={{ strokeWidth: 2, r: 1 }}
                  fill="url(#preReviewCountGradient)"
                  name="테스트수"
                  stroke="#53a9eb"
                />
                <Area
                  dataKey="userCount"
                  dot={{ strokeWidth: 2, r: 1 }}
                  fill="url(#userCountGradient)"
                  name="이용자 수"
                  stroke="#f1bd44"
                />
              </AreaChart>
            </ResponsiveContainer>
          </Box>
          <Box className="ChartLegends">
            <Box className="ChartLegend">
              <Box />
              <T>이용자 수</T>
            </Box>
            <Box className="ChartLegend">
              <Box />
              <T>테스트수</T>
            </Box>
          </Box>
        </Box>
    </StatTabPanel>
  )
}

export { StatUsageStatus }

처음엔 전체 가로스크롤 되는 코드였는데, 디자인상으로는 길어지면 y축은 고정이고 x축만 스크롤이 되게 디자인이 나와있어서, 코드를 수정했다. 처음에 어떻게 할지 고민했는데 해당 라이브러리 깃 issue에 비슷한 고민 해결을 올려둔 분이 있어서 참고할 수 있었다.

const StatUsageStatus = ({ value }) => {
...코드생략
  return (
    <StatTabPanel value={value} index={0} className="StatUsageStatus">
      <Box className="ChartWrap">
		... 코드생략
        <Box className="ChartBox">
          <Box className="ChartContent">
            <Box className="ChartYAxis">
              <AreaChart
                width={62}
                height={400}
                data={chartData}
                margin={{
                  top: 10,
                  right: 0,
                  left: 0,
                  bottom: 65,
                }}
              >
                <YAxis stroke="#333" tickLine={false} />
                <Area
                  fillOpacity={0}
                  strokeOpacity={0}
                  dataKey="preReviewCount"
                />
                <Area fillOpacity={0} strokeOpacity={0} dataKey="userCount" />
              </AreaChart>
            </Box>
            <Box className="ChartXAxis">
              <ResponsiveContainer width={chartWidth} height="100%">
                <AreaChart
                  width={'100%'}
                  height={400}
                  data={chartData}
                  margin={{
                    top: 10,
                    right: 60,
                    left: 0,
                    bottom: 30,
                  }}
                >
                  {/* SVG 그라데이션 정의 */}
                  <defs>
                    {/* userCount 그래디언트 */}
                    <linearGradient
                      id="userCountGradient"
                      x1="0"
                      y1="0"
                      x2="0"
                      y2="1"
                    >
                      <stop offset="0%" stopColor="#f1bd44" stopOpacity={0.5} />
                      <stop offset="100%" stopColor="#f1bd44" stopOpacity={0} />
                    </linearGradient>
                    <linearGradient
                      id="preReviewCountGradient"
                      x1="0"
                      y1="0"
                      x2="0"
                      y2="1"
                    >
                      <stop offset="0%" stopColor="#53a9eb" stopOpacity={0.5} />
                      <stop offset="100%" stopColor="#53a9eb" stopOpacity={0} />
                    </linearGradient>
                  </defs>
                  <CartesianGrid vertical={false} />
                  <XAxis
                    dataKey="date"
                    interval={0}
                    tick={<CustomTick />}
                    tickLine={false}
                  />
                  <Tooltip />
                  <Area
                    dataKey="preReviewCount"
                    dot={{ strokeWidth: 2, r: 1 }}
                    fill="url(#preReviewCountGradient)"
                    name="테스트수"
                    stroke="#53a9eb"
                  />
                  <Area
                    dataKey="userCount"
                    dot={{ strokeWidth: 2, r: 1 }}
                    fill="url(#userCountGradient)"
                    name="이용자 수"
                    stroke="#f1bd44"
                  />
                </AreaChart>
              </ResponsiveContainer>
            </Box>
          </Box>
          <Box className="ChartLegends">
            <Box className="ChartLegend">
              <Box />
              <T>이용자 수</T>
            </Box>
            <Box className="ChartLegend">
              <Box />
              <T>테스트수</T>
            </Box>
          </Box>
        </Box>
      </Box>
    </StatTabPanel>
  )
}

      // recharts라이브러리 스타일
      .ChartContent {
        display: flex;
        height: dp(400);
        .ChartYAxis {
          width: dp(80);
          height: dp(400);
        }
        .ChartXAxis {
          overflow: hidden;
          overflow-x: auto;
          &::-webkit-scrollbar {
            height: dp(6);
          }

          &::-webkit-scrollbar-thumb {
            border-radius: dp(3);
            background: #aaa;
          }

          &::-webkit-scrollbar-thumb:hover {
            background: #aaa;
          }

          &::-webkit-scrollbar-track {
            background: #eee;
          }
          .recharts-responsive-container {
            .recharts-wrapper {
              .recharts-surface {
                // 차트 내 가로선
                .recharts-cartesian-grid {
                  .recharts-cartesian-grid-horizontal {
                    line {
                      stroke: #ddd;
                      stroke-dasharray: 2 2;
                    }
                  }
                }
                // 차트 내 도트
                .recharts-area {
                  &:first-child {
                    .recharts-area-dots {
                      circle {
                        stroke: #0b7cd3;
                      }
                    }
                  }
                  &:last-child {
                    .recharts-area-dots {
                      circle {
                        stroke: #d3970b;
                      }
                    }
                  }
                }
                // 차트 내 X축
                .recharts-xAxis {
                  .recharts-cartesian-axis-line {
                    stroke: #ddd;
                    stroke-width: dp(1);
                    stroke-dasharray: 2 2;
                  }
                  .recharts-cartesian-axis-ticks {
                    .recharts-cartesian-axis-tick {
                      text-align: left;
                      @include font(500, 12, 20, -0.55);
                    }
                  }
                }
                // 차트 내 Y축
                .recharts-yAxis {
                  .recharts-cartesian-axis-line {
                    stroke: #aaa;
                  }
                  .recharts-cartesian-axis-ticks {
                    @include font(bold, 14, 20);
                  }
                }
              }

              .recharts-tooltip-wrapper {
                .recharts-default-tooltip {
                  padding: dp(5) dp(10) dp(10) !important;
                  .recharts-tooltip-label {
                    @include font(600, 14, 24);
                  }
                  .recharts-tooltip-item-list {
                    .recharts-tooltip-item {
                      padding: 0 !important;
                      span {
                        @include font(bold, 14, 20);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

Y축과 X축을 따로 분리하고 X축만 스크롤이 생기도록 div를 분리했다.

결과

참고

- https://recharts.org/en-US/api

- https://github.com/recharts/recharts/issues/1364#issuecomment-2608588147

[VSCode] 갑자기 svg파일이 코드가 아닌 미리보기로 보일 때

이나당 — Sat, 19 Apr 2025 18:04:53 +0900

평소랑 다를거 없었는데... 왜..갑자기...

갑자기 svg가 코드가 아닌 미리보기로 뜨게됐다.

원래 미리보기로 보다가 일회성으로 코드만 보려는 분들은

VSCode검색창 열어서 Text Editor모드로 하면 해당 파일을 코드로 볼 수있다.

하지만 나는 모든 svg파일을 코드로 보는걸 원하기때문에 설정을 수정해줬다.

VSCode 설정 (Ctrl + , 또는 Cmd + ,) 열기

우측상단 JSON으로 열기

아래 코드 추가

"workbench.editorAssociations": {
  "*.svg": "default"
}

[CSS/SCSS] SCSS에서 CSS 변수 중복 적용 문제 해결하기

이나당 — Wed, 26 Mar 2025 08:05:42 +0900

문제

React 프로젝트에서 SCSS를 사용할 때, common.scss 파일에 CSS 변수도 선언하고 여러 파일에서 불러오는 구조를 만들었다.

하지만, 개발자 도구에서 확인해보니 같은 스타일이 여러 번 중복 로드되는 문제가 발생!!!!

이로 인해 CSS 변수가 페이지마다 중복 선언되는 문제가 발생했다.

// 기존의 common.scss
:root {
    --btn-green-border: none;
    --btn-yellow-border: none;
    /* (이런 변수들이 반복됨...) */
}


[data-theme=light]{
...
}

...그외 scss 공통함수들이 있었다

그로인해 아래처럼 똑같은 변수선언이 여러개가 생겨서 스크롤이 엄청 쌓이게 되어버린..

원인: SCSS @use의 동작 방식

SCSS의 @use는 파일을 독립적으로 불러와서 중복 로드를 방지하는 기능이 없다. 그렇기에 어떤 파일에서 @use를 했든 간에, 사용한 곳마다 새롭게 로드가 된다.

시도1

그래서 scss안에 css변수들을 global.scss라는 파일로 분리를 해봤지만 문제가 똑같았다.

css와 scss 파일을 분리했으나 중복 문제를 일으킨 원인

1. global.scss파일을 만든후 CSS 변수를 해당 파일로 옮기고,

2. common.scss에서 @use './global.scss';로 불러오고,

3. 개별 스타일 파일(예: patient.page.scss)에서 @use '../common.scss';를 하였다.

결과 => common.scss가 다시 불러질 때마다 global.scss가 중복 로드됨. === 똑같음

// common.scss에서 global.scss를 사용함 (이러면 중복됨!!!!)
@use './global.scss';

@function dp($n) {
  @return calc($n / 16 * 1rem);
}

시도1의 파일. 이렇게 하면 common.scss가 불러와질 때마다 결국 global.scss도 함께 불러와지게 된다.

// patient.page.scss
@use '../common.scss';  // common.scss에서 global.scss를 가져옴 (1번 로드)

// 다른 파일에서도 common.scss를 사용
@use '../common.scss';  // common.scss에서 global.scss를 또 가져옴 (2번 로드)

즉, common.scss를 여러 SCSS 파일에서 @use하면, global.scss도 중복 로드..

시도2

global.scss를 딱 한 번만 로드하기

global.scss를 오직 index.scss에서만 한 번 불러오고, common.scss에서 따로 global.scss를 불러오지 않도록 수정했다.

// global.scss ( !!어디에서도 @use하지 않음)
:root {
  --base-font-size: 1rem;
  --btn-green-border: none;
  --btn-yellow-border: none;
}

[data-theme='light'] {
  --bg-color: #fff;
}

[data-theme='dark'] {
  --bg-color: #000;
}

// common.scss (SCSS 변수와 함수만 포함 위에 @use 사용 X)
@function dp($n) {
  @return calc($n / 16 * 1rem);
}

// index.js (여기서만 global.scss를 불러옴)
export * from './common.scss'
export * from './components'
export * from './default.scss'
export * from './global.scss' // 여기에서 한 번만 불러옴
export * from './pages'

// 개별 페이지 스타일 (patient.page.scss)
@use '../common.scss' as common;

.PatientPage {
  background-color: var(--bg-color);
}

global.scss는 index.scss에서 한 번만 불러오므로 더이상 중복 적용되지 않는다.

지금 생각해보면 당연히 한곳에서만 불러오면 된다.

뭔가 해결법이 간단했는데, 생각이 꼬여가지고 굳이 분리한 파일을 다시 @use 해서 가져온 이상한 시도를 했던 경험 @.@

[OTT JUMP] 크롬익스텐션 테스트 등록하기 (wavve 오프닝 건너뛰기, 다음회차 자동재생)

이나당 — Sun, 2 Mar 2025 11:12:19 +0900

애니보는데 넷플릭스는 저 '끝내지 않는 Netflix'가 있어서 자동으로 넘어가지는데, 웨이브는 안되는게 귀찮아서 만들었다.

티빙으로는 애니를 잘 안봐서.. 나중에 티빙도 쓰게된다면 티빙버전도 만들어야겠다.

{
  // 사용자가 특정 웹페이지를 열 때 사용할 JavaScript 또는 CSS 파일을 지정
  "content_scripts": [
    {
      "matches": ["*://www.wavve.com/*"], // 확장 프로그램을 실행할 웹사이트
      "js": ["content.js"] // 실행할 js파일
    }
  ],
  // 확장 프로그램의 설명란에 표시되는 설명
  "description": "Wavve에서 오프닝 건너뛰기랑 다음회차를 자동으로 재생해주는 크롬 확장 프로그램이에요!",
  "host_permissions": ["*://www.wavve.com/*"], // activeTab설정 후 특정사이트 접근을 위해 추가한 설정
  "manifest_version": 3, // 현재 확장 프로그램이 사용할 크롬 확장 프로그램의 버전. 유일하게 지원되는 값은 3
  "name": "Wavve AutoPlay", // 크롬 웹스토어에 등록될 때 보일 확장 프로그램의 이름
  "permissions": ["activeTab"], // 확장 프로그램 특별 권한, activeTab은 현재 보고있는 탭에서만 실행. 참고로 안상의 이유로 크롬에서는 불필요한 권한을 요청하면 스토어 등록이 어려움
  "version": "1.0.0" // 확장 프로그램의 버전
}

배포할 코드를 만든 후 manifest.json 설정을 입력한다.

더 필요한건 여기서 확인

https://developer.chrome.com/docs/extensions/reference/manifest?hl=ko

chrome://extensions/

구글 크롬에서 해당 링크로 이동하면 위와 같은 창이 뜬다.

우측 상단에 개발자 모드를 켜고, 왼쪽 위에 "압축해제된 확장 프로그램을 로드합니다."를 선택하여 내 프로젝트 경로를 열어준다. 그러면 아래 전체확장 프로그램에 내가 만든 확장프로그램이 뜨고, 코드 수정후 새로고침을 누르면 다시 올릴 필요없이 최신 소스가 반영이 된다.

테스트 할 때는 새로고침 후 확인 하면된다.

오류 발생시에는 오류 버튼이 생기고

오류 버튼을 통해 들어가면 어느부분에서 오류가 떴는지 확인을 할 수 있다.

content.js 는 내가 추가한 js파일.

이런식으로 바로바로 콘솔 확인 및 브라우저에서 테스트가 가능해진다. 쏘편리~

쏘편하다 이말이에요~

다만 익스텐션 깔면 알아서 자동으로 넘어가져버려서

아이콘 눌렀을 때 사용자가 컨트롤 할 수 있도록 추가해야하고,.. 다음화넘기고 이전화 넘기고 할 때랑

새로운 애니들 볼때도 오류 없는지 계속 체크해야 할 것 같당

~~(를 핑계로 열심히 애니를 본다)~~

전체코드는 여기서 확인

javascript/wavve-skip at master · Ina-dang/javascript

Contribute to Ina-dang/javascript development by creating an account on GitHub.

github.com

일단은 쓰면서 더 테스트해보고~ (아직 좀 거슬려서 수정하고싶은게 남아있당)

추가할 기능 있나 보면서 잘 굴러가는것 같으면익스텐션 정식등록까지 해야지.

그때는 정식등록하는 법 포스팅을 가져오겠당

참고:

- https://support.google.com/chrome/a/answer/2714278?hl=ko

- https://developer.chrome.com/docs/extensions/get-started

[React] 폰트사이즈 설정 조정하기

이나당 — Sat, 15 Feb 2025 13:41:03 +0900

우리회사는 RN이나 플러터를 사용하지않고 리액트로 앱을 만든다 ㅇ_ㅇ.

앱은 정말 껍데기만 만들고 대부분을 웹에서 하고있다.

운영 때 앱 업데이트를 최대한 줄이고 웹 수정 후 바로 반영할 수 있도록 하기위해서.

그래서 항상 앱 만들때 폰트 크기 고정으로 진행했는데,

이번에 진행하는 곳에서 기획에 폰트 크기 조절기능을 넣어달라고 하셔서..

웹에서 폰트크기를 조절해서 설정에서 폰트크기를 조절할 수 있도록 만들었다.

초반부 코드라 조금 더 다듬어져서 지금화면이랑은 다르긴 하지만

기록용으로 남겨두는 포스팅

우헤헹 (한달에 1번 이상은 기술 블로그를 올리고 싶어서..)

// App.jsx
import createCache from '@emotion/cache'
import { CacheProvider } from '@emotion/react'
import { setDefaultOptions } from 'date-fns'
import { ko } from 'date-fns/locale'
import { SnackbarProvider } from 'notistack'
import { useEffect } from 'react'
import Router from './router'
import { useFontSizeStore } from './status'
import { log } from './tools'

/**
 * 애플리케이션의 최상위 컴포넌트입니다.
 * 전역 상태 및 설정을 모든 하위 컴포넌트에 제공합니다.
 *
 * @example
 * ReactDOM.render(<App />, document.getElementById('root'))
 */
const App = () => {
  const cache = createCache({ key: 'css', prepend: true })
  const { fontSize, setFontSize } = useFontSizeStore()

  useEffect(() => {
    setFontSize(fontSize)
    document.documentElement.style.setProperty('--base-font-size', `${fontSize}rem`)
  }, [fontSize, setFontSize])

  setDefaultOptions({ locale: ko })
  log.info('App')
  return (
    <CacheProvider value={cache}>
      <SnackbarProvider
        anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
        autoHideDuration={3000}
        dense
        maxSnack={2}
        preventDuplicate
      >
        <Router />
      </SnackbarProvider>
    </CacheProvider>
  )
}

export default App

// globalStore.js

import { create } from 'zustand'
import { getLocalStorage, hasLocalStorage, setLocalStorage } from '../../tools'

const keyFontSize = 'FontRatio'

const useFontSizeStore = create((set) => ({
  fontSize: hasLocalStorage(keyFontSize) ? getLocalStorage(keyFontSize) : 1,

  setFontSize: (size) => {
    setLocalStorage(keyFontSize, size)
    set({ fontSize: size })

    // 스토리지 이벤트 트리거
    window.dispatchEvent(
      new StorageEvent('storage', { key: keyFontSize, newValue: JSON.stringify(size) })
    )
  },

  refreshFontSize: () => {
    const storedFontSize = getLocalStorage(keyFontSize)
    set({ fontSize: storedFontSize ? storedFontSize : 1 })
  },
}))

// 스토리지 이벤트 리스너 추가
if (typeof window !== 'undefined') {
  window.addEventListener('storage', (event) => {
    if (event.key === keyFontSize) {
      useFontSizeStore.getState().refreshFontSize()
    }
  })
}

export { useFontSizeStore }

//SettingPage.jsx

...

const FontSizeSlider = ({ action }) => {
  const { fontSize, setFontSize } = useFontSizeStore()

  const handleChange = (event, newValue) => {
    setFontSize(newValue)
    document.documentElement.style.setProperty('--base-font-size', `${newValue}rem`)
    action
  }
  return (
    <Box>
      <T>가</T>
      <Slider
        onChange={handleChange}
        aria-label="fontsize"
        value={fontSize}
        step={0.25}
        min={0.75}
        max={2}
        valueLabelDisplay="off"
      />
      <T>가</T>
    </Box>
  )
}

FontSizeSlider.propTypes = {
  action: PropTypes.func.isRequired, // 필수 함수 Prop
}
...
const SettingPage = () => {
  const tag = '[Layout RightSideMenu][SettingPage]'
  log.debug(`${tag} `)
  const propsButtons = {
    ok: {
      label: '로그아웃',
    },
  }
  return (
    <Container className="SettingPage" component="main">
      <Box component="section">
        <T component="h1">설정</T>
      </Box>
      <Box component="section">
        {Object.entries(settingConfig).map(([key, list]) => (
          <SettingsList key={key} title={STR_SETTING[key]} list={list} />
        ))}
      </Box>
      <Buttons {...propsButtons} />
    </Container>
  )
}

// common.scss
...
:root {
  --base-font-size: 1rem;
}

@function dp($n) {
  @return calc($n / 16 * var(--base-font-size));
}

...

초반부에는 폰트크기뿐 아니라 요소들에 적용하는 여백이나 다른것들도 같이 묶어놨었는데,

폰트 조절되는 다른 앱들을 보니 폰트사이즈 키운다고 다 커지는게 아니라 어떤건 커지고 어떤부분(테이블, 네비 등)은 키워도 적용이 안되는 어플들이 대부분이라서 좀더 다른 앱 UI들 참고하면서 계속 개선 진행중 ~.~

커진다고 무조건 ...으로 말줄임 표시해버리는 어플들도 있구.. 그냥 안늘어나는 것도 있구.. 하지만 지금 구현중인 어플은 내용이 전체가 다 보이는게 중요해서.. 고민 고민 중

6월 오픈이니까 좀더 다른 레퍼런스들 많이많이 써봐야지..

생각보다 글자크기 선택 없는 어플도 많더라!-!

구현하면서 이유를 느끼게 돼..