범데이의 개발노트 📄

1. 문제 배경: "이미지 alt를 다 달아야 한다" 공공기관 웹페이지 고도화 작업을 진행하면서 거쳐야 했던 WA 인증(웹 접근성 인증) 과정이 있었다.여기서 요구하는 항목 중 하나가“모든 이미지에 대체 텍스트(alt)를 제공해야 한다”는 것이었다.요구사항만 보면 이미지 설명을 작성하면 되는 단순한 작업처럼 보였다. 하지만 실제 데이터를 확인해보니 상황이 달랐다.이미지가 포함된 게시글이 약 911개였고, 전체 이미지 수는 약 3,300개였다.이 순간 느낀 것은 하나였다.이건 사람이 일일이 처리하면 공수가 크게 발생하는 작업이다. 2. 초기 작업 방식 (ChatGPT 기반 수작업)초기에는 ChatGPT를 활용하여 이미지를 하나씩 처리했다.이미지를 복사하여 전달하고 해당 이미지에 대한 설명을 생성한 뒤 그..

최근에 참여했던 프로젝트에서 출장 여비정산 리포트를 개발 과업 중에“주행거리 증빙 화면(지도 포함)”을 이미지로 캡쳐해 ClipReport에 삽입해야 하는 과정이 있었다. 요구사항은 단순해 보였다.지도 화면이 반드시 포함된 상태로 캡쳐되어야 하고매번 다른 주행 경로를 동적으로 캡쳐해야 하며최종 결과는 리포트 안에서 이미지로 출력되어야 했다하지만 실제 구현은 예상보다 훨씬 복잡했다. 이번 이슈는 아래와 같은 환경에서 발생했다.Report: ClipReportFrontend: ReactBackend: Spring (Java)Screenshot: Playwright (Headless Chromium)Map SDK: Kakao Map SDK그리고 문제는 단순히 “캡쳐가 안 된다” 수준이 아니었다. 이슈는 크게 ..

웹페이지 반응형 작업을 하면서 이런 일이 있었다. 미디어쿼리(@media)를 분명히 작성했는데모바일에서 전혀 적용되지 않았다. 개발자도구(Device Toolbar)에서는 정상처럼 보이는데실제 모바일에서는 레이아웃이 줄어들지 않았다. 원인을 확인해보니 설정이 빠져 있었다. 이 한 줄을 추가하자 그동안 먹지 않던 미디어쿼리가 바로 정상 동작했다. 그래서 왜 viewport를 넣어야 반응형이 제대로 작동하는 건지 그 내용을 정리해보려고 한다. Viewport 무엇인가?Viewport는 사용자가 현재 보고 있는 웹 페이지의 보이는 영역이다.즉, 브라우저가 레이아웃을 계산할 때 기준으로 삼는 화면 영역이다. 문제는 모바일 브라우저의 기본 동작 방식이다. viewport 설정이 없으면모바일 브라우저는 과거 P..

웹 개발하거나 사이트 구조를 공부하다 보면 내비게이션 메뉴 용어(GNB, LNB, SNB, FNB)를 마주하게 된다. 초보자는 물론, 프론트엔드/풀스택 개발자에게도 놓치기 쉬운 UI 기본 개념이다.이번 글에서는 이 내비게이션 개념들을 한눈에 파악할 수 있게 정리해보고자 한다. 보다 설명을 쉽게 하기 위해, 공공기관 사이트인 한국식품안전관리인증원(https://www.haccp.or.kr/main.do) 웹사이트를 실제 예시로 사용한다. 이 사이트는 식품 안전관리 인증 관련 정보를 제공하는 공공기관 홈페이지로, 다양한 내비게이션 구조가 잘 드러나는 대표적인 사례이다. 웹 내비게이션 바란?웹사이트에서 사용자가 목적한 콘텐츠로 쉽게 이동하도록 돕는 UI 메뉴이다.사용자는 이 메뉴를 통해 서비스 기능/페이지를..

사용 중인 Google Mobile Ads(GMA) SDK 버전이 sunset에 접어들면서 SDK를 버전업했을 뿐인데,Unity Android 빌드에서 IL2CPP Internal CLR error (0x80131506) 가 발생하며 빌드가 완전히 막혔다. 결론적으로 문제의 정체는 GMA 자체가 아니라,의존성 변경 이후 Unity/EDM/Bee 캐시가 꼬인 상태에서 증분 빌드* 가 재사용된 것이다.*증분 빌드: 이전 빌드 결과를 재사용해서, 변경된 부분만 다시 빌드하는 방식 캐시 초기화 + unitypackage 재임포트 + Force Resolve로 해결하였다. 1. 문제 발생 배경Unity 2021.3 LTS 프로젝트Android 빌드 대상기존에 정상 동작하던 프로젝트변경 사항은 단 하나 → Go..

CSS 우선순위를 이해했다고 해서 실전에서 모든 충돌을 해결할 수 있는 건 아니다.특히 수십~수백 개의 CSS 파일이 섞여 있는 레거시 프로젝트에서는 "어디서 온 스타일인지 찾는 것" 자체가 가장 큰 문제다. 이 포스팅에서는 복잡한 실무 환경에서 CSS 우선순위 문제를 관리하고 해결하는 실제 전략만 모아 정리했다.(혹시 CSS 우선순위에 대한 기본 개념이 부족하다면, 이 포스팅을 먼저 보는 것을 추천한다.) 1. 어디서 적용되는 스타일인지 빠르게 찾는 방법실무에서 가장 중요한 건 출처 추적이다. 1) Chrome DevTools "Computed" 패널 활용 요소를 검사하고 "Computed" 탭을 보면:현재 적용된 스타일어떤 파일 / 몇 번째 줄에서 왔는지우선순위 승패 여부까지 모두 확인 가능하다. 2..

HTML에서 어떤 스타일이 최종적으로 적용되는지 헷갈린다면,이 포스팅 하나로 모두 정리할 수 있다. 1. CSS 우선순위란?HTML 요소에 여러 CSS 규칙이 동시에 적용될 경우, 브라우저는 특정 규칙을 선택해 적용한다.이때 어떤 규칙을 우선할지 결정하는 기준이 바로 우선순위(Specificity & Cascade) 이다. CSS 우선순위는 다음 4가지 요소로 결정된다.중요도(!important)명시도 (Specificity)소스(origin)와 선언 위치선언된 순서 (Order) 각 요소별로 자세히 정리해보자. 2. 우선순위 1순위: !important동일 속성끼리 충돌할 때, !important는 모든 요소보다 우선한다..box { color: red !important;}단, !importan..

1. 개요Spring MVC기반 웹 애플리케이션에서는 요청(Request)와 응답(Response)이 Controller에 도달하기 전 후로다양한 처리가 필요한 경우가 많다.(예: 로그인 세션 확인, 인코딩 설정, 접근 권한 체크, 로깅 등) 이때 사용할 수 있는 대표적인 두 가지 기술이 바로 Filter와 Interceptor이다. 2. Filter (javax.servlet.Filter)개념Servlet 표준 스펙에서 제공하는 기능이다.DispatcherServlet 이전 단계에서 모든 요청을 가로채서 전처리/후처리 가능.Spring MVC에 종속되지 않고, 톰캣/JEUS 등 Servlet 컨테이너 레벨에서 동작한다. 적용 시점Client → Filter → DispatcherServlet → C..

1. 개념과 철학의 차이Spring Framework는 개발자가 직접 조립하는 구조이다.각 설정파일을 직접 관리하고, 필요한 라이브러리 버전도 일일히 맞춰야 했다. 반면 Spring Boot는 "실행 중심 프레임워크" 이다.내장 서버와 자동 설정을 통해 실행만 하면 바로 서비스가 구동된다.구분 Spring Framework Spring Boot 핵심 철학개발자가 설정하고 조립설정 자동화 + 실행 중심실행 구조외부 WAS 기반내장 WAS 포함 (Tomcat 등)진입점web.xml → DispatcherServletmain() → SpringApplication.run() 2. 설정 구조의 진화Spring 시절에는 web.xml, root-context.xml, servlet-context.xml 등 ..

Spring Framework는 객체를 관리하고 계층 간 의존성을 자동 주입하기 위해 다양한 어노테이션을 제공한다.이 중 실제 개발 현장에서 자주 사용되는 핵심 어노테이션들을 중심으로 설명한다. 1. @Component, @Service, @Repository, @Controller이 네 가지는 Spring Bean 등록용 어노테이션이다.즉, Spring이 해당 클래스를 컨테이너에서 관리하도록 등록하는 역할을 한다.내부적으로는 모두 @Component를 기반으로 하며, 역할에 따라 의미만 다르다. (1) @Component가장 기본적인 Bean 등록용 어노테이션이다.Helper, Util, Validator 등 특정 계층에 속하지 않는 일반 클래스를 Bean으로 등록할 때 사용한다.import org.s..