여러 웹툴을 만들어보며 느낀점, 프론트엔드

카테고리 : 웹 프로그래밍/HTML

제가 웹툴을 만들고 운영한지는 약 1년 반쯤 되었습니다.

 

처음 만든게 대소문자 변환툴이었고, 이것저것 쓸때가 많았던 때라서 이왕 만들때 남들도 사용하기 쉽게 웹에서 무설치형 프로그램을 만들어서 쓰자던게 이러한 툴을 만들게된 계기가 되었습니다.

 

웹브라우저에서 실행가능하다 라는 말이 몇번 나올지는 모르겠지만, 웹브라우저에서 실행가능하다의 의의는 모바일 기기등 웹페이지를 보고 실행할수 있는 거의 대부분의 기기에서 실행이 가능함을 의미합니다.

 

PC 설치보다 간편하고, 쉽게 사용할수 있는 각종 툴을 만들면서 기억나는 내용을 정리해봤습니다.

이 글의 내용은 계속 추가될 수 있습니다.

 

 

 

시작은 간단히

그리고 간단히 만들수있는 각종 툴을 만들고...

  • 글자수 세기 (간단함)
  • 해시 암호 (오픈소스 이용, 간단함)
  • 글자 치환 (어느정도 간단함)
  • QR 코드생성 (오픈소스 이용, 기존 소스에 문제가 있어 난독화된 소스를 수정하느라고 고생)

 

 

 

티스토리 사이트맵 생성하다가..

사이트맵 별거아닌데 이상하게 크롤링방식으로 생성하는 해외사이트의 속도와 기능에 마음이 안들어 만들게 된 티스토리 사이트맵 생성도구(티스토리 API이용)

 

사이트맵을 제대로 설계하기 위해 sitemap 공식 스펙 문서를 찾아 만들었다.

그러나 깜빡한게 하나 있었다.
XML에서 특정문자 사용불가한 점
<![CDATA[ ]]>를 이용해 처리하도록 설정했다.

 

처음에는 OOO.tistory.com에서 OOO부분을 직접 타이핑 하는 방식이었는데, 잘 모르겠다는 답변글도 있었다.

나중에는 목록을 조회하여 생성 버튼을 두도록 변경하였다.

 

티스토리 API가 그나마 간단한 편이라 그나마 어렵지 않게 만들었으나, 잠수함 패치도 있었고..

나중에 보완을 해서 자동업로드 기능을 추가했다.

 

만약에 지금 만들었다면, 조금 더 편리하게 내 서버 경유보다 Vercel, Netlify같은 무료 Node.js를 제공하는 서비스를 이용해서 만들것 같다. (운영에 용이성)

티스토리 블로그는 https를 항상 지원하기때문에 파일 업로드 처리를 위한 경유서버는 https로 운영되어야하고,

https://hi098123.tistory.com 을 cors 허용해야한다. 

 

이 별것도 아닌기능을 티스토리에서는 툴 배포(2019-04-27) 정확히 1년만인 2020-04-27에 티스토리주소/sitemap.xml

자동생성기능이 추가되었습니다.

 

 

이후 티스토리 백업툴도 요청이 있었으나, 여러 방법으로 생각해봤을때 웹에서 파일을 다루는게 용량과 여러점을 생각했을때 좋지 않다는 판단을 하여.. 백업툴은 추가하지 않았습니다.

좀 효율적인 방법이 생각되면 추가될수도 있겠지만, 특성상 티스토리 툴은 애드센스 수익에 도움이 별로 되지않기때문에 잘 모르겠습니다.

 

 

 

 

다시 간단한 툴

  • 랜덤 숫자
  • 이미지 크기조절
  • 이미지 반전

실제 유용한게 무엇일까를 생각해보다 어디에나 볼수있으면서 쉽게 제작가능한 툴을 만들게 되었습니다.

 

지금 생각하기에는 정말 유용한 툴은 간단하면서도 누구나 사용가능한 툴이 아니었나 생각이 됩니다.

 

 

 

 

기억에 남는 툴

  • 비디오 스냅샷 툴
  • 오버워치 랜덤 조준선

 

비디오 스냅샷 툴

아무도 웹에서 이런게 가능할지는 생각도 못했을것 같은 첫번째 툴이 아니었나 싶습니다.

 

사용자의 웹브라우저에서 실행되며, 기존에는 곰플레이어, 팟플레이어등 각종 동영상플레이어나 영상관련 PC프로그램에서만 지원하던 기능을 웹브라우저에서 실행가능하다는 점에 의미를 많이 두었습니다.

 

심지어 가볍게 실행이 가능했고요. 웹브라우저에서 될까하던 머리로만 생각했던 아이디어로 구현 성공하면 사실 만드는 재미가 있습니다.

 

만들때만 해도 비슷한 컨셉의 코드가 실행되는 소스는 본적 없는데, 나중에 만들고 다른것들을 보다보니 비슷한 느낌의 다른 곳에서 쓰이는것도 있더군요.

비디오 스냅샷에 쓰이는게 아닌 다른 기능을 위해 실행되는 코드가 나중에 보이니 또 반갑기도 하고 그렇네요.

 

 

오버워치 랜덤 조준선

랜덤 숫자뽑기에 댓글이 달려 뭔가하고 검색해보고, 만들게 된 툴.

사용자가 많은 편은 아니지만 만드는데 이것저것 생각해본 툴.

 

만들고 나니 input[type="range"]를 안썻어도 됐었다.

어짜피 랜덤으로 결과 출력인데 굳이 수정이되는것을 넣고, IE를 지원하기위해 고민을 했던게 아쉬움이 남습니다.

 

오버워치를 플레이하진 않았지만 이미지를 검색해서 디자인도 비슷하게 만들고 마우스 커서도 오버워치 커서로 적용해놓았습니다.

 

 

 

 

 

어려웠던 각종 툴

  • 가청 주파수 테스트 도구
  • 컬러 피커
  • 이미지 글자 인식 (OCR)

이 세가지 툴이 만드는데 가장 어렵고 오래걸린 툴들이 아니었나 싶습니다.

 

가청 주파수 테스트

가청 주파수 테스트는 관련 스펙문서도 제대로 적혀있지 않은상태였지만, 지원 브라우저가 어느정도 있어서 제작을 하게되었던 툴이었는데.

관련 문서를 찾기가 어렵고 오디오 관련 지식이 없다보니 더 이해하기가 어려웠던 것 같습니다.

 

결국에 문서에 적힌 내용을 여러 실험과 디버깅 결과 이해를 했고 툴이 탄생하게 되었습니다.

만들고 나니 생각난게 오디오를 주파수별로 녹음하면 구버전 기기에서 지원가능하겠지만 이렇게 되면 새로 만드는것과 동일하여 더 이상 작업하지 않았고, 그렇게 최초로 IE11 미지원 툴이 탄생하게 되었습니다.

 

 

컬러 피커

컬러 피커는 예전부터 만들어야지 하다가 만들게 되었는데,

오픈소스가 맘에 드는게 없어서 크롬 개발자도구 컬러피커와 비슷한 형태로 직접 작성하여 만들게 되었습니다.

만들고 나니 IE에서 위치가 잘못계산되어 IE인경우에만 위치 값을 다른것을 사용하도록 하여(핵) 오류를 보완하였습니다.

위치 계산에 IE만 차이가 있었음.

많은 기능을 처음부터 끝까지 직접 만들어서 더 어렵고 오래걸렸던것 같네요.

 

 

이미지 글자 인식툴

이미지 글자 인식툴은 오픈소스를 가져다 써서 그렇게 오래걸린편은 아니나, 한글 인식 정확성을 위해 많은 테스트와 여러 과정을하느라 어려웠던것 같습니다.

 

 

 

 

여러 툴을 만들면서

여기에 소개가 안된것도 아직 많지만, 웹의 프론트엔드에서 처리가능한게 정말 많아졌습니다.

요새 많은 사이트에서 적용하는 gif->webm(또는 webp) 인코딩도 브라우저 상에서 가능하고요.

 

프론트엔드를 잘 활용하면 백엔드의 부담을 많이 줄여줄 수 있는 시대가 된게 아닌가 싶습니다.

물론, 보안상 꼭 서버에서 실행되어야 하는 것은 어쩔수 없습니다.

 

정말 많은 서비스는 프론트엔드에서 최적화할 수 있는데, 이렇게 만들다보니 직업병처럼 안되어있는게 눈에 띄게 되었습니다.

이걸 굳이 백엔드에서 해야돼? 싶은것도 상당히 많더라고요.

 

 

웹에서 아직 할 수 없는 것 (불안정한 것)

  • 4GB 이상의 파일 작업

    대용량 파일작업이 어려운 이유는 파일에 접근이 어렵기 때문입니다.

    파일에 접근하려면 input[type="file"]을 이용해야만 로컬파일에 접근가능한데, 이렇게 접근을하면 파일을 메모리에 두고 웹브라우저에서 사용하기때문에 메모리에 모든 내용을 올려두고 사용하기때문에 매우 불안해진다.

    이를 막기위해 로컬스토리지를 이용하는 방법을 사용할수있는데, 이러면 파일을 복사하는거라 용량차지를 두배나 하게되고, 여러모로 불편한점이 있습니다.

    때문에, 대용량 파일작업은 피해야된는 점이 있습니다.

  • 멀티 코어 작업

    크롬 계열 V8엔진은 1코어만 지원한다. 이런 이유로 멀티코어 활용이 아직 어렵습니다.

    브라우저에 따라 멀티코어를 지원하기도 하나, 아직은 동기식 프로그래밍을 사용하는 경우가 많고, 멀티코어를 굳이 쓸필요가 없는 작업이 많아서 아직은..

 

 

 

웹에서도 가능한 것

  • 그래픽 연산 (WebGL)

    WebGL API를 이용해 OpenGL과 유사하게 그래픽 연산이 가능하다.

    그래픽 코어를 사용가능하기 때문에 웹에서 게임이 돌아가기도 한다.

    게임 개발에는 유니티(Unity)를 많이 사용하는데 유니티에서 10년전에도 웹버전으로 배포도 가능했었고, 지금도 지원을 하기때문에 웹으로 배포하기도 쉽습니다.

  • C언어 등 외부 리소스

    C언어, JAVA, C#, Python 등 외부 언어로도 Wasm(WebAssembly)를 만들어 배포가 가능하기 때문에 외부 언어로 만든것을 웹브라우저에서 지원가능하다.

    Emscripten을 이용해 변환가능하고, IE 11은 asm.js 자바스크립트 파일로 만들어서 사용이 가능하다.

 

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)

예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.

만약, 본문 공유를 원하신다면 링크 공유를 해주세요

저작권 정책 확인하기
링크 공유하기

 댓글