기록
블로그 운영
블로그 작업노트 41: 디자인 변경 및 보안 다운로드 기능 추가 및 백단 작업 등
by
2주만에 또 새로운 작업노트로 찾아왔다!
이번에 한 작업은 앞단은 크게 2개, 뒷단은 미친듯이 많다.
당장 사이트를 구경하는 입장에서야 단순한 레이아웃, 디자인 변경에 불과하지만
실상은 많은 변화가 있었다.
뭐 하나 씩 찬찬히 이야기를 풀어보자~
1. 게시글 헤더 디자인변경
사실상 개인이 직접 만든 사이트의 최강점이 바로 이런거다.
기존의 레이아웃이나 디자인이 질리면 언제든지 뜯어고칠 수 있다는 점.
기존 헤더는 그냥 영역이없고 제목과 카테고리만 허공에 나열해뒀다.
근데 내 사이트는 사이드바가 존재하다보니까 자연스럽게 페이지 레이아웃이 블럭구조라서 뭔가 어색한 느낌이 없잖아 있다.
이를 해결하기위해서는 사이드바를 블럭스타일에서 타파하는것이고, 또하나는 게시글도 블럭형태로 만드는 것이다.
여기선 후자의 방법을 택했다.
게시글의 섬네일 이미지를 가져와 배경에 박았다그래서 위와같이 상단 헤더 영역, 게시글 제목 영역, 우측 사이드바 영역이 이제 블럭구조로 깔끔하게 보인다.
당장은 꽤나 맘에드는데, 또 나중엔 질릴수도...?
그건 그때가서 또 머리굴려보지뭐...
모바일 뷰모바일에서는 이런느낌으로 보인다.
나는 게시글의 첫번째 이미지가 대표 이미지고, 그걸 반복적으로 보여주면 재미없으니까 딤처리와 확대를 통해서 좀 다른느낌으로 제공해보는걸로 디자인을 결정했다.
이 구조에 맞게 약간의 여백, 크기 조정등을 하고 작업마무리!
2. 목차 구조 변경
이 게시글 처럼 게시글 내용이 길어지면 나도 h2, h3태그등을 이용해 목차를 구성한다.
예전에는 이런 목차를 구현하기위해서 게시글 상단에 목차를 구성하고 사이드바에 목차를 붙이는 방식으로 구현했다.
근데 이것도 많이 보니까 영 질리기도하고, 목차랑 별개로 내 사이트의 사이드바나 여러 컨텐츠가 길다보니까 댓글쓰는 위치라던지 연관게시글위치를 한번에 찾고싶은 필요성을 느끼게 됐다.
그래서 기존에 우측하단에 있던 퀵링크를 빼버리고 현재처럼 화면을 구성해보았다.
우측 스크롤바에 해당 컨텐츠가 있는 영역에 목차를 배치했다.이런방식의 스크롤 목차는 나무위키에서 사용하고있었는데,
매번볼때마다 꽤 괜찮다고 느껴서 나도한번 저렇게 해봐야지... 하고 생각했던걸 이번기회에 구현했다.
일단 뭔가 일반적인 목차와다르게 좀 간지도나고, 실질적으로 페이지의 전체구조를 파악하는데 되게 도움이 많이 된다고 생각한다.
맘에 아주 들어!
3. 보안 다운로드
내 사이트, 그러니까 이제 내 블로그는 단순히 내 업무와 취미를 담는공간뿐만이 아닌, 내가 팬자막을 만든것을 공유하는 장소가 되었다.
그러다보니까 파일 공유의 건도 사실 자막을 시작할때 많이 고민해봤다.
가장먼저 떠올린건 파일을 내 서버에 올려서 다운받게 하는 방식이었다.
하지만 이 방식은 트래픽 감당과 더불어 예외사항처리가 감당이 안되기때문에 기각, 이후에 찾은 방법은 구글드라이브의 공유기능을 이용해 파일을 다운받는 기능을 만들었다.
통계 그게뭐임?다만 이 방식도 좀 문제가 있었는데, 파일 다운로드의 통계를 얻을수도 없을뿐더러
일부 사이트 크롤러가 해당 구글드라이브 공유주소를 무단 크롤링해서 필요이상의 구글드라이브 트래픽을 발생시킨다는점이 있었다.
이러면 내 계정의 구글드라이브의 사용량제한이 걸리고, 결국 다른 방식으로 또 다른 스토리지 서비스를 찾아야하므로... 이부분에 대한 제한이 필요하다고 꾸준히 느껴왔다.
그래서 이번에 만들어본게 보안 다운로드다.
똑같다사실 사용하는 사람입장에선 다를바 없다.
오히려 예전에는 구글드라이브화면에가서 직접 다운로드를 눌러야하는걸 이번에는 바로 다운로드되게 했기때문에 더 편해졌을 수도 있다.
하지만 내입장에선 이러니저러니 보안처리를 위해 이런저런 제약을 만들었다.
으흐흐 내 사이트에서만 가능!우선적으로 해당 파일에 대한 접근은 내 사이트에서만 요청이 가도록 만들었다는점이다.
이렇게하지않으면 파일링크가 탈취당하면 다른 사이트에서 내 링크를 자신의 사이트인거마냥 사용하는게 가능하기 때문이다.
이를 더 보완하기위해서 파일다운로드시 백단에서 매우짧은시간동안 토큰을 발행하고 내가 발급한 토큰을 가진사람만 파일을 다운로드하는 기능을 구현했다.
파일링크 제어 테이블얼추 이런걸 컨트롤할 수 있는 기능을 관리자단에서 구현해두고 이런 과정을 통해서 발생하는 다운로드가 아닌이상 파일을 다운받을 수 없게 제한을 걸어뒀다.
일단 1차적인 제한은 이렇게 둘 예정인데, 이걸로도 비정상적인 요청이 줄어들지 않는다면 더 특단의 대책을 취할수 밖에...
4. 자막 교정 API
뭐 이건 아예 위랑은 궤다 다른이야기인데,
나도 자막을 만들다보면 일반적인 번역을 넘어서 한글 띄어쓰기나 맞춤법, 순수한 오타를 내는 경우가 무진장 많다.
이런경우마다 고마운 여러분들이 오타제보를 해주는데, 제작자입장에선 사실 되게 쪽팔리다 ㅎㅎ
저 한글 잘모르빈다...항상 부끄러운 느낌으로 호다닥 고치는데, 번역이아닌 영역- 그러니까 단순한 오탈자의 경우엔 검수가 필요하다고 항상 느꼈다.
그렇다고 매번 자막작업다하고 전문을 맞춤법 검사기 사이트에서 확인하기는 어려우니 이부분을 OpenAI의 API를 통해 검수하는 기능을 관리자단에서 구현했다.
무능한 나를위해서 대신 검수해라! 맞춤법 검사기 api 출동!이렇게 내가 작업한 파일을 올리면 해당 자막에서 Dialog만 추출해서 api를 통해 맞춤법검사를 실행한다.
요청한 데이터는 백단 스케쥴러로 비동기작업으로 진행된다.
검수가 완료되면 위와같이 어느 원문에서 문제가 생겼는지, 어떻게 바꿔야하는지, 왜 틀렸는지에 대해서 알려준다.
이걸 보고 음음 그렇구나~ 하면서 자막편집프로그램에서 최종수정을 감행한다.
와우 자막 퀄리티가 상승한다!이렇게 검수잘해주는 깡깡이와 함께하고있다.
궁금하진 않으셨겠지만, 여기는 내 일기장이니 그러려니 봐주길 바란다!
#블로그
2
개의 댓글
키니하라
*********@*****.***
3시간 전
초반에 이본이 전무달라고 자꾸 눈치줘서 글 하단으로 도망쳤습니다
에루샤
2시간 전
2시간 전
@키니하라
답글