cross-team 업무들, 마라톤 준비, 기획 외주 등 바쁜 시기를 보내고 맞이한 추석! 오랜만에 여유가 생겨 밀린 회고를 써본다 -
1. 기술 이야기
지난 두 달은 크게 SEO, 새 프로젝트 유지보수, A/B test에 걸쳐 일을 했다. 이 과정에서 프론트엔드 측면에서 배운 점들이 많아 정리해보려고 한다.
x-forwarded-proto와 x-forwarded-host
Nginx를 여러 번 손 보고 배포해야 했던 최근 몇 달 자주 마주친 개념들이다. x-forwarded-proto는 클라이언트가 프록시 또는 로드 밸런서에 접속하는데에 사용했던, 말하자면 사용자가 URL에 주소를 입력할 때 그 주소에 사용된 프로토콜(http/https)를 알려주는 헤더(웹 통신(특히 HTTP 프로토콜)에서 요청(request) 과 응답(response) 양쪽 모두에 포함되는 메타데이터(metadata))다. 마찬가지로 x-forwarded-host는 원래 사용된 호스트를 알려주는 헤더다.
왜 이런 개념을 알아야 할까? 현대 웹사이트는 대부분 다층의 리버스 프록시를 사용하고 있다. 리버스 프록시는 인터넷과 웹 서버 사이에 위치하며, 클라이언트의 요청을 가로채서 클라이언트 대신 웹 서버와 통신하는 친구다. 클라이언트 - Cloudflare - API 게이트웨이 / 로드 밸런서(Nginx) - 웹 서버 - DB의 형태를 예로 들 수 있다. 현대 웹사이트는 클라이언트와 최종 웹 서버 사이에 여러 대의 리버스 프록시를 두는 복잡한 구조를 가진다 . 이 과정에서 클라이언트가 처음 요청했던 원본 정보가 손실되거나 왜곡될 위험이 있다. 예를 들어, 클라이언트가 HTTPS로 Cloudflare에 접속했더라도, Cloudflare와 내부 API 게이트웨이(Nginx) 사이의 통신은 효율성을 위해 HTTP로 이루어질 수 있다.
바로 이때, X-Forwarded-Proto와 X-Forwarded-Host 같은 헤더들이 원본 클라이언트의 의도를 최종 웹 서버까지 전달하는 신뢰할 수 있는 연결고리 역할을 한다. 만약 이 헤더가 없다면, 웹 서버는 자신이 HTTP 요청을 받았다고 착각하여 보안이 필요한 페이지에서도 HTTPS로 리다이렉션하지 않는 오류를 발생시킬 수 있다. 마찬가지로, X-Forwarded-Host가 없다면 웹 서버는 잘못된 도메인으로 응답을 생성하거나, 내부 IP 주소를 노출하는 보안 문제를 일으킬 수도 있다.
즉시실행함수
정의되자마자 즉시 실행되는 Javascript Function 를 말한다. 형태는 아래와 같고, 크게 두 부분으로 나뉜다.
- Grouping Operator: () 안에 어휘 범위로 둘러싸인 익명함수다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.
- 두 번째 부분은 즉시 실행 함수를 생성하는 괄호()다. 이를 통해 JavaScript 엔진은 함수를 즉시 해석해서 실행한다.
즉 함수 선언문을 괄호 기호로 둘러싸고 함수를 호출하는 괄호를 붙이는 방식이다.
(function () {
// …
})();
(() => {
// …
})();
(async () => {
// …
})();
여러 경우에서 사용될 수 있지만 나의 경우 브라우저에 삽입되는 코드가 전역 스코프를 오염시키지 않도록 하기 위해 사용했다.
Graceful Degradation(Failure)
우리나라 말로는 우아한 성능 저하 우아한 실패로 번역할 수 있다. 컴퓨터, 기계, 전자 시스템 또는 네트워크의 상당 부분이 파괴되거나 작동할 수 없게 된 경우에도 그 기능을 제한적이나마 유지할 수 있도록 하는 설계 원칙이다. Pragmatic Programmer, Code Complete, The Art of Unix Programming 등의 개발 고전과 정보통신용어사전, Mozilla 등 공신력 있는 사전에도 정의되어 있는 말이다. 실제로 적용해 볼 수 있는 상황이 올까? 싶었는데 A/B 테스트를 구축하면서 있었다.
var SAFETY_MS = 10000;
var safetyTimer = setTimeout(() => { removeProbeShield(); unhideTarget(); }, SAFETY_MS);
Optimizely의 A/B 테스트는 기본적으로 JS + CSS 코드를 기존 서비스에 외부적으로 삽입하는 형태다. 이 A/B test는 JS를 통해 React 웹의 UI 상태를 체크하고, 특정 요소가 확인되면 어떤 다른 특정 요소를 제거한다. 이때 서비스가 잘 돌아가고 있다면 물론 100%의 확률로 요소를 찾을 것으로 예상한다. 하지만 개발 과정에서는 늘 그 과정이 실패할 걸 가정하고 실패했을 시 몇 초 내에 유저에게 알 수 없는 에러 메시지, 절망스럽게 느껴지는 빈 화면 대신 원래(A/B 테스트의 control) UI를 렌더링하는 것이다.
2. SSAFY 유튜브 촬영
컨님의 부탁으로 SSAFY 유튜브에 출연했다. 오랜만에 낮에 사람들을 만나고(ㅋㅋ) 좋은 피드백을 많이 들어서 감사한 하루 - 그 김에 체험단도 몇 탕 해결..ㅋㅋㅋ
3. 러닝 기록 9km 달성
2주 앞으로 다가온 경포마라톤을 앞두고 본격적인 러닝 6개월만에 러닝 최대 기록 9km를 달성했다. 출전 종목인 10km까지는 1km만 남았다. 3km도 겨우 달렸던 나를 생각해보면 정말 놀라운 발전이다.
러닝의 효과는 정말 많다. 우선 피부, 체중, 소화(심지어 화장실 이슈까지!) 같은 신체적인 문제들이 거의 사라지다시피 했고, 식곤증과 내 체질상 고질적인 문제인 부종이 사라진 것도 정말 놀라운 변화다. 무엇보다 삶의 의지와 활력이 정말 많이 올라갔다. 잡념이나 부정적인 생각들은 러닝하는 도중 많이 사라지고는 한다. 아마 러닝을 하면서 식습관을 바꾸지 않았다면 이런 변화를 뚜렷하게 느끼기는 어려웠을 것이다. 친구 말처럼 '뛴 게 억울해서라도' 식습관을 올바르게 가져가려고 노력하다보니 선순환이 일어나는 것 같다. 심지어 나는 밀가루만 끊고 쌀, 전분류는 전혀 제한하지 않는데도 체중이 늘지 않고 있다.
4. 기획 일을 해보며 든 생각들
운이 좋게 한 서비스의 앱을 리뉴얼하는 과정에 기획자로 참여하고 있다. SSAFY에서도 기획이 즐거운 마음 반, 백엔드 친구들이 기피하는 이유 반으로 네 번의 프로젝트에서 전부 기획을 맡았었고 몇 개의 웹사이트 외주 기획은 해봤지만 사용자가 많은 서비스 리뉴얼은 처음이라 와이어프레임, PRD 형식은 여러 곳에서 공부하며 진행하고 있다. 그동안 사용자에게 좋은 기획이란 뭔지 몇 번의 A/B test를 통해 느낀 것들을 적용해보고 있다. 불필요하게 많은 정보를 전달하려고 하지 않고 사용자가 원하는 기능을 더 가시적으로 만들거나 빠르게 만들어 전달하는게 1차 목표다.
어떻게 더 많은 사용자를 더 오랫동안 서비스를 이용하게 만들 것인가에 대한 고민은 서비스 런칭 후에 유저 반응을 지켜보며 생각해 볼 것 같다.
댓글