민혁이의 IT스토리

"지난번 WebRTC 학습 경험을 바탕으로, 이번 팀 프로젝트에서 'AI 실시간 번역 영상통화 서비스' 개발을 맡게 되었습니다. 제 역할은 핵심 기능인 실시간 미디어 전송 파트였습니다.개발 도중 팀원들과 흥미로운 아이디어가 나왔습니다. '단순히 번역만 보여주는 게 아니라, AI 음성(TTS)이 발화자의 입모양에 맞춰 나오는, 마치 애니메이션 더빙 같은 경험을 주면 어떨까?'아이디어는 좋았지만, 기술적으로는 큰 난관이었습니다. 실시간성을 생명으로 하는 WebRTC에서 '싱크(Sync)'를 맞춘다는 건 정반대의 접근이 필요했기 때문입니다. 오늘은 이 '더빙 같은 영상통화'를 구현하기 위해 제가 고민했던 흔적과, 의도된 지연(Intentional Delay) 및 Simulcast를 활용한 해결 과정을 공유하려..

웹 개발 프로젝트를 진행하다 보면 필연적으로 마주치는 문제가 있습니다. 바로 데이터베이스(DB)의 속도 문제입니다. 사용자가 많아지고 데이터가 쌓일수록, 우리가 흔히 쓰는 MySQL이나 Oracle 같은 관계형 데이터베이스(RDBMS)는 조금씩 힘겨워하기 시작합니다. "어떻게 하면 DB 조회를 더 빠르게 만들 수 있을까?"를 고민하던 중, Redis라는 존재를 알게 되었습니다. 처음 접했을 때는 워낙 속도가 빠르다는 이야기에 "혹시 새로 나온 고성능 하드웨어인가?"라고 착각했을 정도입니다. 하지만 Redis는 하드웨어가 아닙니다. 하드웨어(RAM)의 특성을 극대화해서 사용하는 아주 똑똑한 소프트웨어(애플리케이션)입니다. 오늘은 웹 개발의 필수품이 되어버린 Redis가 도대체 무엇인지, 왜 빠르며, 어떻게..

웹 서비스를 개발하다 보면 파일 업로드 기능은 필수적입니다. 하지만 사용자가 "폴더를 통째로" 드래그 앤 드롭했을 때, 그 내부의 계층 구조까지 유지하며 업로드하는 것은 생각보다 까다로운 작업입니다. HTML5의 비표준이지만 강력한 기능인 webkitGetAsEntry를 활용해, 리액트에서 폴더 구조를 유지하며 파일을 스캔하는 방법을 알아보겠습니다. 1. 왜 일반적인 업로드 방식으로는 안 될까?일반적인 이나 e.dataTransfer.files를 사용하면 두 가지 장벽에 부딪힙니다.폴더 인식 불가: 폴더를 드래그해도 브라우저에 따라 무시되거나 빈 파일로 취급됩니다.구조 정보 상실: 폴더 안의 파일들을 읽어오더라도, 그 파일이 어떤 하위 폴더에 속해 있었는지 알 수 있는 path 정보가 사라집니다.이를 ..

WebRTC를 사용하여 화상회의 서비스를 개발하다 보면 "연결(Connectivity)"에만 집중하게 됩니다. 제가 그랬거든요.하지만 영상이 잘 나오는 것만큼 중요한 것이 바로 "접근 제어(Access Control)"입니다. 단순히 https://myapp.com/room/1 같은 URL을 사용했다가는, 숫자를 바꿔서 남의 회의실에 들어가거나 URL이 유출되었을 때 아무나 난입하는 사태가 벌어질 수 있습니다 WebRTC 시그널링 단계에서 초대받지 않은 손님을 막아내는 3단계 보안 전략을 정리해 봅니다 1단계 : 예측 불가능한 방 만들기UUID (Universally Unique Identifier)방을 생성할 때 f47ac10b-58cc... 같은 난수화된 UUID를 사용해야 합니다. 이렇게 하면 공..

WebRTC란 무엇인가?웹 브라우저나 모바일 앱 간에 중간 서버를 거치지 않고 실시간으로 비디오, 오디오, 데이터를 직접 주고받을 수 있게 해주는 오픈소스 기술입니다. WebRTC의 핵심 특징 P2P (Peer-to-Peer): 클라이언트와 클라이언트가 직접 연결되어 데이터를 주고받습니다. 서버를 거치지 않으므로 지연 시간이 극도로 짧다.UDP 기반: 데이터의 무결성보다 속도가 중요한 실시간 스트리밍에 최적화된 UDP 프로토콜을 주로 사용한다.표준화: 구글, 애플, 마이크로소프트 등 주요 브라우저 엔진이 모두 지원한다. WebRTC은 3가지 방식이 있다. Mesh 방식 (P2P) : 각 사용자가 다른 모든 사용자에게 직접 데이터를 보내는 방식이다.장점: 서버 비용이 거의 없고 보안이 뛰어나다.단점: ..

웹서버 인증서란? 웹서버 인증서는 웹사이트와 사용자의 통신을 암호화하고,그 서버가 진짜 신뢰할 수 있는 곳인지 증명하는 디지털 신분증이에요. 쉽게 말하면,“이 사이트가 진짜 내가 접속하려는 사이트가 맞고,내 정보가 중간에서 훔쳐지지 않도록 안전하게 보호한다”는 보증서예요. 왜 필요한가?보안: 로그인 정보, 결제 정보 등이 암호화되어 외부에서 볼 수 없어요.신뢰성: 브라우저 주소창에 🔒 자물쇠가 보이면 사용자 신뢰도 상승.SEO 이점: 구글 등 검색엔진이 HTTPS 사이트를 더 선호해요. 발급과 적용 방법 Let’s Encrypt 같은 무료 서비스 이용서버에서 인증서 발급 명령어 실행 (certbot 등)웹서버 설정에 인증서 파일 연결HTTP → HTTPS로 리다이렉션 설정인증서의 기본 종류 종류..

HTTP란 무엇인가?HTTP(HyperText Transfer Protocol)는 웹에서 클라이언트와 서버가 데이터를 주고받는 약속된 규칙이다우리가 브라우저에 주소를 입력하면, 브라우저(클라이언트)가 서버에 “이 페이지 보여줘!”라고 요청(Request)을 보내고,서버는 그에 대한 결과(Response)를 HTML, 이미지, JSON 등의 형태로 돌려준다. 1. 브라우저에서 https://example.com을 입력하면 2. 브라우저는 서버로 이렇게 요청합니다:GET / HTTP/1.1Host: example.com 3. 서버는 응답을 보냅니다HTTP/1.1 200 OKContent-Type: text/html... HTTP의 구조HTTP는 두 가지 메시지 형태로 동작합니다. 요청(Request)클..

Tiny 서버란 무엇인가Tiny는 200줄로 동작하는 실제 웹 서버입니다. 단순하지만,HTTP 프로토콜과 소켓 프로그래밍의 핵심 개념을 모두 담고 있습니다. Main 함수 - 서버의 시작점 💡 포인트“Tiny는 멀티스레드가 아니라 반복적(Iterative) 서버다.”“한 번에 한 클라이언트 요청만 처리한다.”1. 변수 선언부int listenfd, connfd;char hostname[MAXLINE], port[MAXLINE];socklen_t clientlen;struct sockaddr_storage clientaddr; listenfd: 서버가 클라이언트의 연결 요청을 "듣는(listen)" 소켓의 파일 디스크립터connfd: 실제로 연결이 성립된 후, 클라이언트와 데이터 송수신에 사용하는 “..