data-pantry 님의 블로그

[상하수도기술사 문제풀이] 제93회 상하수도기술사 - 제1교시 (문제 1, 문제 2) 하수도 종합계획, 제 3의 물산업

제93회 상하수도기술사 기출해설 전문가 심층 분석 및 최신 KDS 기준 준수 오늘의 문제 1: [1교시·1번] — 국가 하수도종합계획 1 출제 의도 및 배경 분석 하수도법 제4조에 의거하여 환경부장관이 수립하는 하수도 분야 최상위 종합 행정계획인 국가하수도종합계획의 정체성과 수립 체계를 묻는 문제임. 최근 수립·의결된 제3차 국가하수도종합계획(2026~2035년)에 발맞추어, 단순 위생 보급률 제고에서 벗어나 기후위기 대응, 탄소중립 실현, 자산관리 및 지속가능한 재정 구조로의 패러다임 변화를 기술하는 것이 고득점의 핵심임. 2 실전 압축 답안 국가하수도종합계획의 개요 및 법적 수립 근거 법적..

이전에 소개드렸던 이미지 축소(리사이징) 프로그램입니다.직접 바이브코딩 방식으로 개발하면서 실제로 사람들이 자주 사용할 수 있는 방향으로 계속 개선해 보고 있습니다. 사진 용량 줄이기, 크기 조절, 업로드 제한 맞추기 등 실생활에서 꽤 자주 쓰이는 기능이라 생각보다 활용도가 높더라고요.사용하시면서 불편한 점, 추가됐으면 하는 기능, 오류나 개선 아이디어가 있다면 댓글로 편하게 남겨주세요. 실제 피드백을 반영해서 조금씩 업데이트해볼 예정입니다.많이 활용해보시고, 솔직한 피드백 부탁드립니다 😊

스도쿠 프로그램 제작 이후, 더 많은 사람이 사용할 수 있는 이미지 리사이징 웹앱 '바이브코딩'을 개발한 과정입니다. 제미나이와 GPT를 교차 활용한 프롬프트 고도화 전략과 단계별 개발론을 통해 서버 없는 고성능 이미지 편집 프로그램을 완성한 후기를 공유합니다. [바이브코딩] 사진 크기·사이즈 조절 웹앱 만들기비전문가도 AI와 함께 웹앱을 만들 수 있을까?"사람들이 실제로 많이 쓰는 웹앱 하나 만들어보자." 이 생각에서 이번 프로젝트가 시작됐습니다.이전에 AI의 도움을 받아 간단한 프로그램을 하나 만들어본 경험이 있었는데, 다음에는 '실제로 사람들이 자주 사용할 만한 기능'이 뭐가 있을지 고민하게 되더군요.요즘 일상생활을 하다 보면 사진 용량 때문에 난감한 순간이 꽤 많습니다.카카오톡으로 원본 사진 보..

만든 게임 게시!!!!!

요즘 IT 씬에서 제일 핫한 단어, 혹시 들어보셨나요? 바로 '바이브코딩(Vibe Coding)'입니다. 개발자가 직접 코드를 한 줄 한 줄 타이핑하는 대신, AI(LLM)에게 자연어로 "이런 기능 만들어줘", "이 부분 구조를 이렇게 바꿔줘"라고 지시하며 결과물을 만들어내는 새로운 개발 패러다임을 말하죠. 글로만 읽어서는 감이 잘 안 오더라고요. "이거 진짜 말만 하면 프로그램이 뚝딱 나온다고? 나도 한번 제대로 경험하고 연습해 봐야겠다!"라는 생각이 들었습니다. 그래서 첫 연습 프로젝트로 제미나이를 이용해서 제 블로그 방문자분들이 가볍게 즐길 수 있는 '무설치 웹 스도쿠 게임'을 만들어보기로 했습니다. 아이디어 기획부터 티스토리 배포까지, 저의 좌충우돌 바이브코딩 실전 경험기를 공유합니다. Step..

[Week 1 · 웹 구조 기초] Day 4 / 42CSS 기초 강의｜선택자, Margin, Padding, Display 쉽게 배우기 🎨CSS란? 뼈대만 있는 HTML에 색을 칠하고 여백을 잡아주는 '인테리어 도면'입니다.선택자: 수많은 요소 중 "어떤 녀석"을 꾸밀지 콕 집어내는 '이름표'입니다.Box Model: 웹의 모든 요소는 '네모난 액자'입니다. 이 액자의 안팎 여백을 다루는 게 레이아웃의 전부입니다.1. CSS가 HTML과 연결되는 방식🏠 비유로 이해하기: 건물과 인테리어 도면건물(HTML)을 다 지었다고 끝이 아닙니다. 예쁘게 꾸미려면 인테리어 업자에게 "이 도면(CSS)대로 칠해주세요!"라고 도면을 건네주어야 합니다. 그 도면을 건네주는 '연결 고리' 역할이 바로 태그입니다.HTM..

KO EN JA 📖 공식 사용 가이드 Gemini Folder Manager v3.7 Chrome 확장 프로그램 · 대화 폴더 정리 도구 Gemini를 쓰다 보면 대화가 정말 빠르게 쌓이더라고요. 처음엔 괜찮다가 50개, 100개 넘어가면 찾고 싶은 게 어디 있는지 감도 안 잡히는 경우가 생기죠. 그래서 직접 만든 게 Gemini Folder Manager입니다. 폴더로 묶고, 핀 고정하고, 검색까지 — 필요한 부분만 골라 읽으셔도 됩니다. 목차 01🚀 설치 및 시작 02🖥 화면 구성 03📁 폴더 관리 04💬 채팅 배정 05📌 핀 고정 06🔍 검색·필터·정렬 07☑ 일괄 선택 08🔒 폴더 잠금 09🗑 휴지통 ..

Day 3 — HTML → Tistory 연결"이론 코드가 아닌, 실제 운영 코드를 해부하는 날입니다"🧠 10초 핵심 요약치환자: 서버가 실제 데이터로 '미리 채워서 완성하는 자리'입니다.처리 시점: 브라우저가 파일을 받기 '전'에 서버에서 이미 완성됩니다.오늘의 목표: 수천 줄의 코드 속에서 '레이아웃 블록'을 찾아 주석을 다는 것입니다.1. 치환자는 "미리 완성된 값"이 들어갈 자리입니다가장 많이 하는 오해: 치환자는 브라우저에서 변하는 '빈칸'이 아닙니다. 서버가 내용을 꽉 채워 보낸 완성품입니다.서버에서 처리됨 (전송 전)👉 서버가 이 자리에 내 블로그 제목을 미리 채워넣습니다.브라우저가 받는 최종 결과내 멋진 블로그👉 브라우저는 치환자를 전혀 알지 못합니다. 이미 완성된 텍스트만 받을 뿐이..

Day 2 — DOM Tree와 시맨틱 태그 (개념 재정립)오늘은 HTML을 '쓰는' 연습보다, 구조를 '읽는 눈'을 키우는 날입니다👉 일단 이것만• HTML = 텍스트 파일 그 자체• DOM = 브라우저가 그 텍스트를 읽고 만들어낸 구조체• CSS = 그 구조 안에서 꾸밀 대상을 찾는 방법📌 조금 더 풀면 이렇습니다:HTML은 결국 텍스트 파일입니다.브라우저는 이걸 받아서 화면에 그리기 위해 내부적으로 '구조'로 변환합니다. 이게 DOM입니다.CSS가 실제로 적용되는 대상은 원본 HTML 파일이 아니라, 브라우저가 만들어낸 이 구조(DOM)입니다.👉 어디에 CSS를 넣을지 찾으려면, 이 "구조(DOM)"를 읽을 수 있어야 합니다.1. DOM Tree = 단순 구조가 아니다많이들 헷갈리는 부분입니다..

Tistory Skin GuideDay 1 — 웹 작동 원리 (개념 리셋)1. URL을 입력하면 벌어지는 일1사용자: 주소창에 URL 입력2브라우저: "서버가 어디 있지?" → DNS 조회→ 도메인 이름을 실제 서버 주소(IP)로 변환하는 과정입니다.3요청: 브라우저 → 서버 "페이지 파일 줘" (**HTTP 요청**)→ 서버에 "GET /index.html" 같은 메시지를 보내 콘텐츠를 요청합니다.4응답: 서버 → 브라우저 HTML 전달 (**HTTP 응답**)5렌더링: 브라우저가 HTML 해석 → 화면 출력💡 왜 배울까요? 이 과정을 이해해야 웹이 단순한 화면이 아니라 '요청과 응답'으로 이루어진 구조라는 것을 알 수 있기 때문입니다.🎯 핵심: 브라우저가 받는 것은 결국 텍스트 파일입니다.→ 이 ..