Figma Auto Layout 안 쓰면 생기는 참사들 – 개발자가 울고 가는 디자인 파일의 비밀

이미지
  Figma에서 디자인은 예쁘게 뽑았는데, 개발자가 받으면 왜 멘붕이 올까요? Auto Layout 없이 고정 좌표로 찍어놓은 디자인이 개발 단계에서 어떤 참사를 일으키는지, 그리고 CSS Flexbox/Grid와 어떻게 대응되는지 Before/After 예시로 낱낱이 풀어봤어요.   솔직히 고백할게요. 저도 예전에 Figma에서 Auto Layout 없이 디자인한 적이 꽤 있었어요. 프레임 안에 요소를 드래그해서 눈대중으로 배치하고, 간격은 화살표 키로 1px씩 맞추고… 화면에서 보기엔 완벽했거든요. 😅 그런데 그 파일을 넘겨받은 개발자분이 조용히 슬랙으로 보내온 메시지가 아직도 생생해요. "이거… 간격이 위에서는 12px인데 아래에서는 13px이고, 이 버튼은 텍스트가 길어지면 어떻게 되는 건가요?" 그때부터 Auto Layout을 제대로 공부하기 시작했어요.   고정 좌표 배치 vs Auto Layout, 뭐가 다른 건가요? 🤔 가장 근본적인 차이부터 짚어볼게요. Figma에서 요소를 배치하는 방식은 크게 두 가지예요. 구분 고정 좌표 배치 Auto Layout 배치 방식 X, Y 좌표로 절대 위치 지정 방향·간격·패딩 규칙으로 자동 배치 내용 변경 시 다른 요소 수동으로 재배치 필요 자동으로 리플로우 반응형 대응 ...

AWS RDS 커넥션 부족? max_connections 계산부터 HikariCP·PgBouncer 설정까지

이미지
  AWS RDS에서 갑자기 'Too many connections' 에러가 뜬다면? PostgreSQL과 MySQL 환경에서 커넥션 풀이 필요한 이유, max_connections 계산법, 그리고 PgBouncer·HikariCP 등 실전 튜닝 방법까지 한 번에 정리했어요.   새벽에 슬랙 알림이 울려서 확인해보니 RDS 대시보드에 "Too many connections" 에러가 빼곡하게 찍혀 있었어요. 트래픽이 갑자기 몰린 것도 아닌데 왜 커넥션이 가득 찼는지, 그때는 정말 감이 안 잡히더라고요. 😓 알고 보니 문제는 DB 자체가 아니라 애플리케이션 쪽 커넥션 풀 설정에 있었어요. 이 경험 이후로 커넥션 풀 튜닝의 중요성을 뼈저리게 느꼈는데요, 오늘은 그때 배운 것들을 정리해서 공유해볼게요!   'Too many connections' 에러, 왜 발생하나요? 🤔 이 에러는 말 그대로 DB 서버가 허용하는 최대 동시 연결 수를 초과했을 때 발생해요. RDS에서 이 한도는 max_connections 파라미터로 결정되는데, 인스턴스 클래스(메모리 크기)에 따라 기본값이 달라요. 근데 진짜 문제는, max_connections 자체보다 커넥션을 낭비하는 구조 인 경우가 훨씬 많아요. 흔한 원인들을 보면요: 커넥션 풀 없이 매 요청마다 새 연결을 맺고 끊는 경우 커넥션 풀 사이즈를 서버 인스턴스 수만큼 곱해서 생각하지 않은 경우 슬로우 쿼리가 커넥션을 오래 점유하면서 풀이 고갈되는 경우 커넥션 누수(leak) — 사용 후 반환하지 않는 코드 버그 💡 알아두세요! 커넥션 풀(Connection Pool)은 미리 일정 수의 DB 연결을 만들어두고 재사용하는 기술이에요. 매번 연결을 새로 맺는 비용...

Nginx 502/504 에러 원인과 해결법 총정리 – 실무 트러블슈팅 프로세스

이미지
  Nginx에서 갑자기 502 Bad Gateway나 504 Gateway Timeout이 뜬다면? 에러 로그 확인 방법부터 proxy_read_timeout 등 핵심 타임아웃 설정 변경까지, 실무에서 바로 쓸 수 있는 트러블슈팅 프로세스를 정리했어요.   서비스 운영하다 보면 한 번쯤은 꼭 마주치게 되는 에러가 있죠. 바로 Nginx의 502 Bad Gateway 와 504 Gateway Timeout 이에요. 저도 한밤중에 모니터링 알림이 울려서 부랴부랴 서버에 접속했던 기억이 있는데, 처음엔 로그를 어디서 봐야 하는지조차 헤맸어요. 😅 이 두 에러는 비슷해 보이지만 원인이 다르고, 해결 방법도 달라요. 오늘은 제가 실제로 겪으면서 정리한 로그 분석 순서와 타임아웃 설정 변경 프로세스를 처음부터 끝까지 공유해볼게요!   502 vs 504, 뭐가 다른 건가요? 🤔 둘 다 Nginx가 뒤쪽 서버(업스트림)와 통신하다 생기는 에러인데요, 핵심 차이를 먼저 알아야 정확한 진단이 가능해요. 구분 502 Bad Gateway 504 Gateway Timeout 의미 업스트림이 잘못된 응답을 보냄 업스트림이 시간 내 응답하지 않음 주요 원인 백엔드 프로세스 죽음, 소켓 오류 처리 시간 초과, 과부하 체감 증상 ...