data-pantry 님의 블로그

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

data-pantry — Thu, 21 May 2026 15:57:40 +0900

제93회 상하수도기술사 프리미엄 해설

제93회 상하수도기술사 기출해설

전문가 심층 분석 및 최신 KDS 기준 준수

오늘의 문제 1: [1교시·1번] — 국가 하수도종합계획

1 출제 의도 및 배경 분석

하수도법 제4조에 의거하여 환경부장관이 수립하는 하수도 분야 최상위 종합 행정계획인 국가하수도종합계획의 정체성과 수립 체계를 묻는 문제임. 최근 수립·의결된 제3차 국가하수도종합계획(2026~2035년)에 발맞추어, 단순 위생 보급률 제고에서 벗어나 기후위기 대응, 탄소중립 실현, 자산관리 및 지속가능한 재정 구조로의 패러다임 변화를 기술하는 것이 고득점의 핵심임.

2 실전 압축 답안

국가하수도종합계획의 개요 및 법적 수립 근거
- 법적 근거: 하수도법 제4조(국가하수도종합계획의 수립)
- 수립권자 및 주기: 환경부장관이 10년 단위로 수립 (필요 시 5년마다 타당성 검토 후 변경)
- 계획의 성격: 전국 하수도정비의 기본 방향 및 투자 계획을 제시하는 최상위 행정계획
- 하부 계획과의 연계: 유역하수도정비계획(지방환경청 수립) 및 하수도정비기본계획(지자체 수립)의 수립 지침 역할 수행
제3차 국가하수도종합계획(2026~2035)의 핵심 추진 방향
- 기후위기 대응 우수배제 안전망 강화: 강우 방재 설계빈도 상향(기존 관로 10~30년 → 기후변화 고려 가이드라인 적용), 스마트 하수도관망 및 도시침수 대응 시스템 구축
- 탄소중립 및 에너지 자립화: 유기성 폐자원을 활용한 바이오가스법 이행, 하수처리장 에너지 자립률 제고 및 하수 열에너지 회수 다각화
- 선제적 자산관리 체계(Asset Management) 도입: 30년 이상 경과한 노후 관로 및 처리시설의 정밀진단, 노후화 비율 예측에 따른 선제적 개량 재원 조달 계획 수립
- 하수처리수 재이용 다각화: 대체수자원 확보를 위한 고도 처리 및 첨단 산업(반도체, 제철 등) 공업용수로 공급 확대

2026년 기준 변경 및 차별화 실무 포인트
2026년 국가물관리위원회에서 의결된 제3차 국가하수도종합계획(2026~2035)의 핵심은 '바이오가스법'에 따른 공공 의무생산 목표 준수 및 '하수도 자산관리 가이드라인' 마련입니다. 단순 시설 확충에서 탈피하여, 관리 주체의 재정 현실화(요금 현실화율 제고)와 장기 노후화 대비 적립금 제도 도입 등 자산 보전 관점의 정책 연계를 언급하면 강력한 차별화가 가능합니다.

3 필수 도식

최상위 계획 국가하수도종합계획 (10년 주기, 환경부)

➔

유역 단위 계획 유역하수도정비계획 (지방환경청)

➔

실행 계획 하수도정비기본계획 (20년 단위, 지자체)

오늘의 문제 2: [1교시·2번] — 제3의 물산업

1 출제 의도 및 배경 분석

전통적인 상수의 생산·공급(제1의 물산업)과 하수의 이송·처리(제2의 물산업) 단계를 넘어, 기후변화에 따른 물 부족 해결과 자원순환을 목표로 하는 물 재이용(Water Reuse), 중수도, 해수담수화, 대체수자원 개발을 총칭하는 제3의 물산업에 대한 핵심 정의와 시장성 및 기술 동향을 파악하고 있는지 묻는 기출 문항임.

2 실전 압축 답안

제3의 물산업의 정의 및 범위
- 정의: 선형적인 상·하수도 구조에서 탈피하여 오염된 물을 고도 수처리 기술을 통해 순환형 수자원으로 재생하거나 대체 수자원을 개발·공급하는 융복합 고부가가치 산업
- 주요 분야: 하수처리수 재이용, 중수도(Greywater) 시스템, 빗물이용시설, 해수담수화(Desalination)
핵심 기술적 구성 요소
- 분리막 공정(Membrane Technology): 초순수급 재이용수 제조를 위한 전처리막(MF/UF) 및 본처리막(RO/NF) 시스템 고도화
- 에너지 회수 장치(PX, Pressure Exchanger): 해수담수화 RO 공정의 전력 소비량 감축을 위한 고율 에너지 회수 설계
- 물-에너지 넥서스(Water-Energy Nexus): 수처리 과정의 탄소배출 최소화를 위한 지능형 송배수 및 재생에너지 생산 하이브리드 제어
성장 배경 및 필요성
- 기후변화에 따른 극단적 가뭄 빈도 증가로 인한 수자원 불균형 해소
- 글로벌 대기업의 ESG 경영 강화(Water Stewardship) 및 산업용수 수요 가중
- 환경 오염 부하 저감에 따른 하천 환경 유량 확보 기여

2026년 기준 변경 및 차별화 실무 포인트
최근 반도체 메가 클러스터(예: 용인)에 공급할 공업용수 확보방안으로 하수처리수 재이용수가 적극 도입되고 있습니다. 또한 2026년 상반기에 의결된 제2차 물 재이용 기본계획 변경(안)은 첨단 산업 공업용수 공급을 위한 분리막 기반 고도처리 인프라 확충에 중점을 두고 있습니다. 답안 작성 시 '반도체 초순수(Ultra Pure Water) 국산화 사업 및 첨단 산업 연계 하수 재이용 비즈니스 모델'을 기술하면 최고 수준의 가점을 획득할 수 있습니다.

3 필수 도식

하수처리 방류수 BOD 기준 만족수

➔

고도막여과 (MF/RO) 부유물 및 이온 제거

➔

제3의 대체수자원 반도체 공업용수 / 초순수 원수

진행률: 제93회 1교시 1~2번 해설 완료

15%

데일리 핵심 용어집

용어명	정의 및 핵심 내용	최신 동향 / 기준
국가하수도종합계획	하수도법 제4조에 의거, 환경부장관이 10년 단위로 수립하는 하수도정비의 국가 단위 최상위 행정계획	제3차 계획(2026~2035)에 기후변화 홍수 방어 대책, 탄소중립, 자산관리 정착 반영
제3의 물산업	상·하수도를 넘어서 하수 재이용, 중수도, 해수담수화 등 순환형/대체 수자원을 공급 및 관리하는 차세대 물 산업	용인 반도체 클러스터 등 고품질 산업용수 확보 수단 및 초순수 국산화와 연계

3분 복습 퀴즈

Q1. 국가하수도종합계획은 어떤 법률에 따르며, 수립 주기 및 권한자는 어떻게 됩니까?

A1. 하수도법 제4조에 의거하여, 환경부장관이 10년 주기로 수립합니다. (5년마다 타당성을 재검토하여 필요한 경우 계획을 변경할 수 있습니다.)

Q2. 제3의 물산업의 대표적인 네 가지 대상 분야는 무엇입니까?

A2. 하수처리수 재이용, 중수도 시스템, 빗물이용시설, 해수담수화가 제3의 물산업을 구성하는 대표 분야입니다.

현재 문항: 1교시 2번

다음 대기 문항: 1교시 3번 MFC(Microbial Fuel Cell)

[바이브코딩] 이미지축소 웹앱 만들기(2)

data-pantry — Fri, 15 May 2026 18:20:28 +0900

이전에 소개드렸던 이미지 축소(리사이징) 프로그램입니다.

직접 바이브코딩 방식으로 개발하면서 실제로 사람들이 자주 사용할 수 있는 방향으로 계속 개선해 보고 있습니다. 사진 용량 줄이기, 크기 조절, 업로드 제한 맞추기 등 실생활에서 꽤 자주 쓰이는 기능이라 생각보다 활용도가 높더라고요.

사용하시면서 불편한 점, 추가됐으면 하는 기능, 오류나 개선 아이디어가 있다면 댓글로 편하게 남겨주세요. 실제 피드백을 반영해서 조금씩 업데이트해볼 예정입니다.

많이 활용해보시고, 솔직한 피드백 부탁드립니다

[바이브코딩] 이미지축소 웹앱 만들기(1)

data-pantry — Fri, 15 May 2026 18:15:42 +0900

스도쿠 프로그램 제작 이후, 더 많은 사람이 사용할 수 있는 이미지 리사이징 웹앱 '바이브코딩'을 개발한 과정입니다. 제미나이와 GPT를 교차 활용한 프롬프트 고도화 전략과 단계별 개발론을 통해 서버 없는 고성능 이미지 편집 프로그램을 완성한 후기를 공유합니다.

[바이브코딩] 사진 크기·사이즈 조절 웹앱 만들기

비전문가도 AI와 함께 웹앱을 만들 수 있을까?

"사람들이 실제로 많이 쓰는 웹앱 하나 만들어보자." 이 생각에서 이번 프로젝트가 시작됐습니다.

이전에 AI의 도움을 받아 간단한 프로그램을 하나 만들어본 경험이 있었는데, 다음에는 '실제로 사람들이 자주 사용할 만한 기능'이 뭐가 있을지 고민하게 되더군요.

요즘 일상생활을 하다 보면 사진 용량 때문에 난감한 순간이 꽤 많습니다.

카카오톡으로 원본 사진 보낼 때의 용량 압박
이력서나 공공기관 서류 제출 시 깐깐한 이미지 크기 제한
블로그 포스팅 업로드 시 페이지 속도 최적화
스마트폰 용량 꽉 찼을 때 사진 용량 줄이기

생각보다 '사진 크기 줄이기'는 사람들이 아주 자주 검색하고 필요로 하는 기능이었습니다. 그래서 이번에는 사진 크기와 사이즈를 조절하는 웹앱을 직접 만들어보기로 했습니다.

단, 단순히 "사진 용량만 줄이는 기능 하나" 덜렁 있는 게 아니라, 조금 더 실사용자 중심으로 접근하고 싶었습니다. 그래서 제가 처음 AI에게 던진 질문은 단순한 개발(코딩) 요청이 아니었습니다.

"사진 크기 줄이기, 사이즈 줄이기, 자르기 기능이 모두 들어간 웹앱을 만들고 싶은데, 어떤 순서로 어떻게 진행하면 좋을까?"

무작정 코딩부터 시키지 않았다

예전의 저였다면 아마 이런 식으로 물어봤을 겁니다. "이미지 리사이즈 하는 기능 만들어줘."

그런데 이번에는 접근 방식을 완전히 바꿨습니다. 본격적인 코딩을 시작하기 전에 다음과 같은 큰 틀부터 설계하기 시작했습니다.

어떤 기능이 필수적으로 필요한지
사용자 입장에서 어떤 흐름이 편할지
화면(UI)은 어떻게 구성해야 깔끔할지
전체적인 작업은 어떤 단계로 진행해야 하는지

AI에게 단순히 코드만 뱉어내라고 한 게 아니라, "이 프로젝트를 어떻게 이끌어가야 할까?"라는 컨설팅부터 받은 셈이죠. 그러자 의외로 꽤 체계적이고 전문적인 답변이 돌아왔습니다. 기능의 우선순위, 개발 순서, 구현 방식까지 큰 윤곽을 AI가 먼저 잡아주더군요.

한 번에 다 만들지 마라: 단계별 진행의 마법

어느 정도 큰 그림이 잡혔을 때, AI가 저에게 아주 중요한 제안을 하나 했습니다. "이걸 한 번에 다 만들려고 하지 말고, 단계를 쪼개서 진행하는 게 좋습니다."

생각해 보니 정말 맞는 말이었습니다. 저 같은 비전문가 입장에서 가장 무서운 건, 한 번에 너무 많은 코드를 받아 넣었다가 어디서 에러가 났는지도 모른 채 프로젝트가 꼬여버리는 상황이니까요. 그래서 전체 개발 과정을 이렇게 쪼개기 시작했습니다.

1단계: 기본 이미지 업로드 기능 구현
2단계: 이미지 크기 조절(리사이징) 알고리즘 적용
3단계: 용량 최적화 처리
4단계: 사용자가 직접 영역을 지정하는 사진 자르기(Crop) 추가
5단계: 전체적인 UI 개선 및 다듬기
6단계: 오류 수정 및 브라우저 호환성(안정화) 테스트

이렇게 눈앞의 미션을 작게 나눠놓으니, 시작 전의 막막함이 훨씬 덜했습니다.

프롬프트도 그냥 쓰지 않았다 (초안 → 피드백 → 개선)

여기서부터 이번 바이브코딩의 가장 재밌는 점이 나옵니다. "어차피 단계를 나눴으니, 이제 그 단계마다 그냥 AI한테 짜달라고 시키면 되는 거 아냐?" 처음엔 저도 그렇게 생각했습니다. 그런데 막상 해보니 '프롬프트(명령어)'의 품질에 따라 결과물의 수준이 하늘과 땅 차이로 달라지더군요.

그래서 이번엔 이런 필살기를 썼습니다.

먼저 제가 원하는 기능을 기준으로 1차 프롬프트 초안을 씁니다.
그리고 그 프롬프트를 다른 AI(GPT 등)에게 들고 가서 검토를 받습니다.
- "내가 이런 코드를 짜달라고 할 건데, 이 프롬프트에서 부족한 점이 뭐야?"
- "더 완벽한 결과물이 나오게 이 명령어를 수정해 줘."
그렇게 AI의 피드백을 받아 뾰족하게 다듬어진 프롬프트를 실제 작업에 투입합니다.

쉽게 말해, 코드만 AI에게 맡긴 게 아니라 'AI를 가장 잘 부려먹는 방법'까지 AI와 함께 설계한 셈입니다. 이 과정이 결과물의 퀄리티를 전문가 수준으로 끌어올리는 데 결정적인 역할을 했습니다.

개발하면서 계속 수정하고 업데이트하다

물론 처음 설계한 내용이 끝까지 그대로 가지는 않았습니다. 개발을 진행하다 보니 자연스럽게 여러 아이디어와 문제점들이 보였습니다.

"어? 이 기능은 버튼을 여기 두는 것보다 저기로 옮기는 게 낫겠는데?"
"사용자가 여기서 해상도 비율을 헷갈려 할 수도 있겠다."
"스마트폰으로 볼 때 이 부분 UI가 좀 깨지네?"

그럴 때마다 고민하지 않고 내용을 즉석에서 반영했습니다. 여기서 중요했던 건, 머릿속으로 바뀐 내용을 다시 프롬프트에 정확히 업데이트해서 전달하는 것이었습니다.

처음 만든 프롬프트 하나로 끝낸 게 아니라, 상황에 맞춰 계속 요구사항을 진화시켰습니다. AI도 결국 사람이 어떤 입력값을 주느냐에 따라 결과가 달라지니까요.

그리고 최종 결과물 완성

모든 단계를 끝낸 뒤, 드디어 그럴싸한 웹앱이 탄생했습니다. 하지만 끝날 때까지 끝난 게 아니죠. 최종 결과물을 두고 AI에게 다시 한번 깐깐한 검토를 요청했습니다.

대용량 사진을 넣었을 때 성능(메모리) 문제는 없는지?
특정 브라우저에서 오류가 날 가능성은 없는지?
크기 조절과 자르기 기능이 서로 충돌하진 않는지?
사용자의 사진 데이터가 밖으로 새어나갈 보안상 위험은 없는지?

결론은 "현재 구조에서는 큰 문제 없이 실사용이 가능하다"였습니다. 물론 앞으로 실제 사용해 보면서 수정할 부분은 계속 나오겠지만, 코딩 비전문가가 '바이브코딩' 방식만으로 여기까지 완성해 냈다는 것 자체가 저에겐 꽤 신선하고 놀라운 경험이었습니다.

바이브코딩 해보면서 느낀 점

불과 얼마 전까지만 해도 웹앱 하나 만들려면 너무 막막했습니다. HTML? CSS? JavaScript? 프론트엔드? 백엔드? 이런 개발 용어들만 봐도 머리가 아팠죠.

그런데 지금은 개발의 패러다임이 조금 달라진 것 같습니다. 이제 중요한 건 '내가 코드를 한 줄 한 줄 직접 얼마나 잘 짜느냐'보다, 'AI에게 무엇을, 어떻게, 어떤 순서로 요청하느냐'에 가까워진 느낌입니다.

물론 개발 지식이 탄탄하게 있다면 훨씬 빠르고 유리하겠지만, 저 같은 비전문가도 "문제를 잘 정의하고 단계별로 똑똑하게 요청하는 능력(프롬프트 설계)"만 있다면 꽤 많은 것을 만들어낼 수 있다는 걸 뼈저리게 체감했습니다.

마무리 (한 줄 요약)

이번 '사진 크기·사이즈 조절 웹앱' 개발은 단순히 기능 하나를 뚝딱 만들어본 경험이 아니라, "AI와 제대로 협업하면 내 아이디어를 어디까지 현실로 만들 수 있을까?"를 시험해 본 뜻깊은 과정이었습니다.

다음번에는 사람들이 실생활에서 더 유용하게 쓸 수 있는 또 다른 재미있는 웹앱에 도전해 볼 생각입니다. 바이브코딩, 이거 생각보다 꽤 재밌고 짜릿하네요.

한 줄 요약: > 비전문가도 바이브코딩으로 충분히 쓸만한 웹앱을 만들 수 있다. 단, 코딩 실력보다 **'좋은 프롬프트 설계 + 쪼개서 생각하는 단계별 접근'**이 훨씬 더 중요하다!

[바이브코딩 체험기] 코딩 없이 '기획력'만으로 스도쿠 웹 게임 만든 썰(2)

data-pantry — Wed, 13 May 2026 17:47:25 +0900

만든 게임 게시!!!!!

[바이브코딩 체험기] 코딩 없이 '기획력'만으로 스도쿠 웹 게임 만든 썰(1)

data-pantry — Wed, 13 May 2026 17:43:49 +0900

요즘 IT 씬에서 제일 핫한 단어, 혹시 들어보셨나요? 바로 '바이브코딩(Vibe Coding)'입니다. 개발자가 직접 코드를 한 줄 한 줄 타이핑하는 대신, AI(LLM)에게 자연어로 "이런 기능 만들어줘", "이 부분 구조를 이렇게 바꿔줘"라고 지시하며 결과물을 만들어내는 새로운 개발 패러다임을 말하죠.

글로만 읽어서는 감이 잘 안 오더라고요. "이거 진짜 말만 하면 프로그램이 뚝딱 나온다고? 나도 한번 제대로 경험하고 연습해 봐야겠다!"라는 생각이 들었습니다.

그래서 첫 연습 프로젝트로 제미나이를 이용해서 제 블로그 방문자분들이 가볍게 즐길 수 있는 '무설치 웹 스도쿠 게임'을 만들어보기로 했습니다. 아이디어 기획부터 티스토리 배포까지, 저의 좌충우돌 바이브코딩 실전 경험기를 공유합니다.

Step 1. 첫 지시: "스도쿠 게임의 뼈대를 만들어줘"

바이브코딩의 핵심은 '명확한 지시'라고 들었습니다. 처음부터 너무 복잡하게 요구하지 않고, 핵심 기능부터 던져봤습니다.

나의 프롬프트: "웹 게시물에 배포할 수 있는 스도쿠 게임을 HTML/CSS/JS 단일 파일로 만들어줘. 난이도는 상, 중, 하로 나누고 각각 10개의 퍼즐 데이터를 넣어줘."

놀랍게도 AI는 단 몇 초 만에 스도쿠의 룰이 적용된 코드를 짜주었습니다. 하지만 결과물은 아주 '날것' 그대로였습니다.

[이미지 삽입 포인트 1: 처음 만들어진 날것의 게임 화면 캡처]

돌아가긴 하는데, 화면 하나에 모든 게 다 몰려 있어서 '게임'을 한다는 느낌이 전혀 안 살았습니다. 이때 깨달았죠. "아, 바이브코딩은 AI가 다 해주는 게 아니라, 내가 기획자이자 PM이 되어 구조를 설계해 줘야 하는구나!"

Step 2. UX 기획자 모드: "화면의 Depth(계층)를 나눠보자"

사용자 경험(UX)을 개선하기 위해 앱처럼 화면이 전환되도록 구조를 다시 잡았습니다. AI에게 화면을 3단계로 나누어 라우팅(Routing) 처리를 해달라고 구체적으로 요구했습니다.

나의 프롬프트: "화면을 3단계로 나눠줘.

메인화면: '즐거운 sdoku' 타이틀과 [상/중/하] 난이도 버튼

스테이지 선택 화면: 1번~10번 게임 선택 버튼과 [홈으로] 버튼

게임 화면: 실제 스도쿠 보드와 [뒤로 가기], [새로고침] 버튼"

찰떡같이 알아들은 AI는 코드를 갈아엎고 화면이 부드럽게 전환되는 로직을 추가해 줬습니다.
[이미지 삽입 포인트 2: 3단계 화면 전환 모습 캡처]

이제 제법 그럴싸한 웹 앱의 형태를 갖추게 되었습니다.

Step 3. 유저 잔존율 높이기: "데이터 영구 저장의 마법"

게임의 형태를 갖추니 욕심이 났습니다. 새로고침하면 제가 깼던 기록이 날아가는 게 아쉬웠거든요. 하지만 서버나 DB를 구축하기엔 일이 너무 커지는 상황이었습니다.

나의 프롬프트: "별도 서버 없이 브라우저 저장소(Local Storage)를 이용해서 사용자가 클리어한 스테이지를 저장해 줘. 그리고 스테이지 선택 화면에 클리어한 번호는 '✔' 스탬프를 찍어줘!"

결과는 대성공이었습니다. 클라이언트 브라우저의 저장소를 활용해 서버 비용 0원으로 영구 저장 기능을 구현했습니다.
[이미지 삽입 포인트 3: 스탬프가 찍힌 스테이지 선택 화면]

이 영롱한 초록색 체크마크(✔) 하나가 유저들의 수집욕과 클리어 본능을 자극하는 엄청난 요소가 되었습니다.

Step 4. 화룡점정: "도파민을 자극하는 디테일 추가"

바이브코딩의 진짜 묘미는 '마이크로 인터랙션'을 추가할 때 빛을 발했습니다. 코드로 짜려면 복잡한 애니메이션 로직들을 말 한마디로 추가할 수 있었죠.

나의 프롬프트: "사람들이 재미를 느끼게 다양한 요소를 듬뿍 넣어줘!

정답을 다 맞추면 폭죽 애니메이션을 터트려줘!

오답을 넣으면 셀이 도리도리(Shake) 흔들리게 해줘.

실시간 타이머와 최고 기록 기능을 넣어줘.

고수들을 위한 '메모 모드(Pencil)' 기능도 추가해!"

AI는 외부 라이브러리(canvas-confetti)를 활용해 화려한 폭죽을 구현하고, CSS 애니메이션으로 타격감을 살려냈습니다. 특히 스마트폰에서 버튼을 누를 때 미세하게 진동(Haptic)이 오게 만든 부분은 정말 감탄이 나왔습니다.
[이미지 삽입 포인트 4: 폭죽이 터지는 클리어 화면 & 편의 기능]

체험 결론: 바이브코딩 시대, 핵심은 '프롬프트'가 아니라 '기획력'이다

단 하루 만에, 텍스트 편집기와 제미나이만 띄워놓고 이 정도 퀄리티의 웹 게임을 만들었습니다. 이번 연습을 통해 느낀 바이브코딩의 본질은 다음과 같습니다.

AI는 훌륭한 '손'이지만, '머리'는 여전히 사람의 몫이다. 구조를 어떻게 짤지, 어떤 UX를 줄지 고민하는 기획력이 결과물의 퀄리티를 결정합니다.
에러를 두려워할 필요가 없다. 버그가 나면 "야, 이거 모바일에서 두 번 터치하니까 화면이 커져버리잖아. 막아줘"라고 말하면 끝입니다.
아이디어를 실행하는 비용이 '0'에 수렴한다.

개발 지식이 깊지 않아도, 논리적인 사고방식과 명확한 방향성만 있다면 누구나 자신만의 서비스를 런칭할 수 있는 시대가 진짜로 왔습니다. 생각만 해뒀던 아이디어가 있으신가요? 오늘 당장 AI를 켜고 첫 지시를 내려보세요!
(제가 바이브코딩으로 만든 스도쿠 게임은 다음 글에서 직접 플레이해 보실 수 있습니다. 최고 기록에 도전해 보세요!)

AI를 이용한 티스토리 웹디자인 공부 - [DAY 4] CSS 기초 강의｜선택자, Margin, Padding, Display

data-pantry — Wed, 13 May 2026 15:11:32 +0900

[Week 1 · 웹 구조 기초] Day 4 / 42

CSS 기초 강의｜선택자, Margin, Padding, Display 쉽게 배우기

CSS란? 뼈대만 있는 HTML에 색을 칠하고 여백을 잡아주는 '인테리어 도면'입니다.
선택자: 수많은 요소 중 "어떤 녀석"을 꾸밀지 콕 집어내는 '이름표'입니다.
Box Model: 웹의 모든 요소는 '네모난 액자'입니다. 이 액자의 안팎 여백을 다루는 게 레이아웃의 전부입니다.

1. CSS가 HTML과 연결되는 방식

비유로 이해하기: 건물과 인테리어 도면

건물(HTML)을 다 지었다고 끝이 아닙니다. 예쁘게 꾸미려면 인테리어 업자에게 "이 도면(CSS)대로 칠해주세요!"라고 도면을 건네주어야 합니다. 그 도면을 건네주는 '연결 고리' 역할이 바로 <link> 태그입니다.

HTML 파일 안에 아래처럼 <link> 태그를 한 줄 적어두면, 브라우저가 "아, 이 HTML은 저 CSS 파일을 보고 꾸미면 되는구나!" 하고 알아차립니다.

HTML 코드

<!-- HTML의 머리(<head>) 부분에 넣어서 CSS 도면을 불러옵니다 --> <link rel="stylesheet" href="./style.css">

티스토리에서는 CSS를 어디에 넣나요?
티스토리는 우리가 직접 <link> 태그를 쓸 필요 없이 이미 다 연결해 두었습니다.

경로: 블로그 관리자 꾸미기 → 스킨편집 → HTML 편집 → CSS 탭

이 CSS 탭의 맨 아래 빈 공간에 여러분이 짠 코드를 복사해서 붙여넣기만 하면 곧바로 내 블로그 디자인이 바뀝니다!

2. 대상 콕 집어내기: 선택자(Selector) 3대장

️ 비유로 이해하기: 운동장에서 학생들 부르기

명령(스타일)을 내리려면 "누구한테" 내릴지 정확히 불러야겠죠?

태그 (학년): "1학년들(p) 전부 파란 체육복 입어!" (범위가 가장 넓음)
클래스 (동아리): "축구부(.soccer)만 노란 조끼 입어!" (특정 그룹 묶기)
아이디 (학번): "1번 학생(#student1)만 빨간 모자 써!" (단 한 명만 지정)

① 태그 (Tag)

p, div, a처럼 태그 이름을 그대로 적습니다. 범위가 너무 커서 주로 블로그 전체의 글씨체나 기본 색상을 정할 때만 씁니다.

p { color: black; }

② 클래스 (Class)

이름 앞에 점(.)을 붙입니다. 티스토리 글상자, 버튼 등 비슷하게 생긴 것들을 묶어서 디자인할 때 가장 많이 씁니다. (실무 사용률 90%)

.btn { color: blue; }

③ 아이디 (ID)

이름 앞에 우물정(#)을 붙입니다. 한 페이지에 딱 하나만 있어야 합니다. 주로 헤더, 푸터 같은 큼직한 구역을 통째로 잡을 때 씁니다.

#header { color: red; }

CSS 힘의 크기 (우선순위)
좁고 구체적으로 부를수록 힘이 더 셉니다.
태그 < 클래스 < ID 순으로 힘이 세기 때문에, 똑같은 곳에 색칠을 지시하면 힘이 센 ID의 색상으로 덮어씌워집니다.

⚠️ 티스토리 실전 팁: 안 바뀐다고 !important 남발 금지
내 맘대로 디자인이 안 바뀐다고 무적 치트키인 color: red !important;를 자꾸 쓰면 나중에 디자인이 꼬여서 수정이 아예 불가능해집니다. 안 바뀐다면 우선순위에서 밀린 것이므로 대상을 더 구체적으로 지목(계층 선택자)해야 합니다. (아래 7번 참고)

3. 초보자 1위 실수: Padding vs Margin (박스 모델)

️ 비유로 이해하기: 벽에 걸린 '액자'

웹사이트의 모든 글자, 이미지, 버튼은 눈에 보이지 않는 네모난 액자 안에 들어있습니다. 초보자는 액자 안쪽 여백과 바깥쪽 여백을 가장 많이 헷갈립니다.

Content (사진): 액자 안에 들어갈 실제 사진이나 글자입니다.
Padding (사진과 틀 사이의 여백): 사진을 돋보이게 하려고 사진과 나무틀 사이에 두는 하얀색 여백(매트)입니다. (액자 안쪽 공간)
Border (나무 틀): 액자를 두르고 있는 단단한 테두리입니다.
Margin (벽에 걸린 액자 사이의 간격): 벽에 여러 액자를 걸 때, 내 액자와 옆 액자가 떨어져 있는 거리입니다. (액자 바깥 공간)

Margin (옆 액자와의 거리)

Border (액자 테두리) Padding (안쪽 여백)

Content (실제 사진/글자)

초보자 필수 암기: 상자(버튼)를 뚱뚱하게 만들려면 Padding! 상자(버튼)를 남과 띄워놓으려면 Margin!

⚠️ 나중에 반드시 만나게 될 함정: Margin 겹침 (Collapse)
위 액자가 margin-bottom: 50px;을 가지고, 아래 액자가 margin-top: 50px;을 가지면 총 100px이 떨어질 것 같죠? 아닙니다! 위아래 마진이 만나면 더 큰 값 하나(50px)로 겹쳐버립니다. "어? 왜 간격이 내가 더한 것만큼 안 벌어지지?" 할 때 이 현상을 의심하세요.

4. 삽질 방지 치트키: box-sizing

비유로 이해하기: 30cm짜리 수납장 사기

방 구석에 가로 30cm짜리 빈 공간이 있어서 딱 맞는 30cm짜리 수납장을 주문했습니다. 그런데 배송 온 걸 보니 수납장 나무판자 두께가 양옆으로 2cm씩 튀어나와서, 실제 크기가 34cm가 되어버렸습니다. 방에 안 들어가겠죠?

브라우저도 똑같습니다. "가로 300px 박스 만들어줘" 하면, 브라우저는 안에 들어가는 물건(Content)만 300px로 맞추고, 여백(Padding)과 테두리(Border) 두께는 그 밖으로 살을 덧붙여 박스를 뚱뚱하게 만들어 버립니다. 그래서 웹사이트 레이아웃이 다 깨지는 겁니다.

우리가 상식적으로 생각하는 크기, 즉 "테두리 두께까지 몽땅 합쳐서 딱 300px로 만들어!"라고 브라우저에게 명령하는 코드가 바로 box-sizing: border-box; 입니다.

CSS 예제

/* CSS 파일 최상단에 항상 넣는 필수 초기화(Reset) 코드 */ *, *::before, *::after { box-sizing: border-box; /* 테두리까지 합쳐서 크기를 계산하라는 선언! */ } body { margin: 0; /* 브라우저가 몰래 넣어두는 기본 바깥 여백 없애기 */ padding: 0; }

☕ 여기까지 이해하셨다면 웹 디자인의 가장 큰 고비를 넘긴 겁니다! 기지개 한번 켜고 갈까요?

5. 왜 크기가 안 먹히지? (Display 개념)

"폭을 300px로 줬는데 왜 안 변하지?", "왜 위아래로 간격이 안 떨어지지?" 입문자들이 하루 종일 머리를 쥐어뜯는 원인 1순위는 바로 태그가 가진 '성격(Display)'을 몰라서입니다.

핵심 비유: Block은 '무조건 혼자 앉는 독방'이고, Inline은 '다닥다닥 붙어 앉는 합석'입니다.

성격 (Display)	특징 비유	크기/여백 조절
Block (블록)	독방 VIP석. 자기 내용물이 작아도 무조건 가로 한 줄을 통째로 혼자 씁니다. (예: div, p)	✅ 너비(width), 상하좌우 여백(margin) 모두 맘대로 조절 가능
Inline (인라인)	일반 합석. 딱 자기 글자 크기만큼만 자리를 차지하고, 옆에 다른 애가 와도 나란히 붙어 앉습니다. (예: span, a)	❌ 너비 조절 불가능! 위아래 여백(margin)도 무시됨!
Inline-block	혼종. 옆 사람과 나란히 붙어 앉으면서도(Inline 특징), 내 마음대로 덩치(크기)는 키울 수 있는(Block 특징) 성격입니다.	✅ 옆에 나란히 서면서 + 크기 조절도 다 됨

❓ 인터넷에서 찾은 코드를 넣었는데 크기가 안 커져요!

초보자가 가장 많이 하는 질문입니다. 링크를 거는 <a> 태그나 글자색을 바꾸는 <span> 태그에 아무리 너비(width)와 위 여백(margin-top)을 줘봐야 아무 일도 일어나지 않습니다. 태생이 '합석(Inline)'이라서 그렇습니다.

해결 코드

span { /* ❌ Inline 성격이라 무시당하는 코드 */ width: 300px; margin-top: 50px; /* ✅ 해결: 성격을 바꿔주면 무시당하던 코드가 즉시 적용됨! */ display: inline-block; }

6. 실전 필수: 가운데 정렬 3가지 패턴

가운데 정렬은 상황(어떤 태그 성격인지)에 따라 쓰는 문법이 전혀 다릅니다. 이 3가지만 기계적으로 외워두세요.

CSS 예제

/* 1. 박스(Block 요소) 자체를 통째로 가운데로 보낼 때 */ .box { width: 300px; /* 너비가 정해져 있어야 함 */ margin: 0 auto; /* 좌우 여백을 반반씩 자동으로 남기라는 뜻 = 가운데 정렬 */ } /* 2. 글자나 작은 요소(Inline 요소)를 가운데로 보낼 때 */ .text-area { text-align: center; } /* 3. 요즘 가장 많이 쓰는 '완벽한 상하좌우' 중앙 정렬 (Day 5 예고편) */ .parent { display: flex; justify-content: center; /* 가로 중앙 */ align-items: center; /* 세로 중앙 */ }

7. 티스토리 정밀 타겟팅: 계층 선택자

비유로 이해하기: 주소 좁혀가기

"123번지"라고만 부르면 전국에 있는 수많은 123번지 중 어디인지 모릅니다. "서울시 > 강남구 > 역삼동 > 123번지"처럼 부모부터 좁혀가면서 대상을 명확히 찍어주는 기술입니다. 티스토리 스킨의 기존 디자인을 이기려면 이렇게 구체적으로 불러야 합니다.

CSS 예제

/* 공백(띄어쓰기) = "~안에 있는 모든 자손" */ .sidebar p { color: #333333; /* 사이드바 안에 있는 모든 p태그의 색을 바꿔라 */ } /* 꺾쇠(>) = "~바로 밑에 있는 자식만" */ .menu > li { font-size: 16px; /* 메뉴 바로 아래에 있는 1차 항목만 바꿔라 (더 깊은 곳은 무시) */ }

8. 오늘의 실습: F12 확인 및 복붙 실습

1 내 티스토리 블로그를 열고 F12(개발자 도구)를 누릅니다.

2 좌측 상단의 커서(↖) 아이콘을 클릭하고, 디자인을 바꾸고 싶은 곳(예: 글 제목)을 클릭합니다.

3 오른쪽 Styles 패널 맨 아래로 스크롤을 내려 네모난 박스 모델(Margin, Padding) 그림을 확인합니다.

3분 복붙 실습: 내 블로그에 직접 넣어보기

블로그 관리자 → 스킨편집 → HTML 편집 → CSS 탭 맨 아래에 아래 코드를 그대로 복사해서 붙여넣고 '적용'을 눌러보세요.

CSS 예제

.practice-card { background: white; padding: 24px; margin-bottom: 20px; border: 1px solid #e2e8f0; border-radius: 12px; }

padding 숫자를 50px로 바꿔보세요. 박스 안쪽이 뚱뚱해집니다.
border-radius 숫자를 50px로 바꿔보세요. 모서리가 둥글게 변합니다.

️ 왜 내가 쓴 코드만 적용이 안 될까? (디버깅)
F12 창 오른쪽(Styles 패널)에 나타난 내 코드를 자세히 보세요.

~~color: red;~~ (가운데 줄이 쭉 그어져 있다) 원래 있던 스킨 코드보다 내 코드의 '힘(우선순위)'이 약해서 졌다는 뜻입니다. 계층 선택자로 주소를 더 길게 적어주세요.
(내가 쓴 코드가 아예 안 보인다) 클래스 이름 앞에 점(.)을 빼먹었거나 오타가 난 겁니다.

☑️ Day 4 완료 체크리스트

☐

선택자의 힘은 태그 < 클래스(.) < ID(#) 순서라는 걸 안다.

☐

박스 안쪽을 찌우는 건 Padding, 바깥을 띄우는 건 Margin임을 구분할 수 있다.

☐

box-sizing: border-box를 쓰면 상자 크기 맞추기가 훨씬 쉬워진다는 걸 설명할 수 있다.

☐

inline 요소(합석)에는 크기나 상하여백을 줘봤자 무시당한다는 사실을 이해했다.

❓ 초보자가 가장 많이 하는 질문 (FAQ)

Q. CSS 코드를 바꿨는데 왜 제 블로그엔 적용이 안 돼요?
A. 4가지 중 하나일 확률이 99%입니다.
1. 캐시 문제: 브라우저가 옛날 디자인을 붙잡고 있습니다. (해결: 강력 새로고침 Ctrl+Shift+R)
2. 선택자 오타: 클래스 이름 앞의 점(.)을 빼먹었거나 스펠링을 틀렸습니다.
3. 우선순위 밀림: 기존 스킨의 CSS가 힘이 더 세서 내 명령이 먹히지 않았습니다. (해결: 계층을 더 길게 써보세요)
4. Display 성격: inline 요소에 크기나 위아래 여백을 주려 했습니다. (해결: display: inline-block; 추가)

Google Gemini 폴더 정리 확장앱(Google Chrome, Naver Whale 등...) 제미나이 편하게 사용하세요. [Gemini

data-pantry — Mon, 27 Apr 2026 11:11:25 +0900

Gemini Folder Manager v3.7 사용 가이드

공식 사용 가이드

Gemini Folder Manager v3.7

Chrome 확장 프로그램 · 대화 폴더 정리 도구

Gemini를 쓰다 보면 대화가 정말 빠르게 쌓이더라고요. 처음엔 괜찮다가 50개, 100개 넘어가면 찾고 싶은 게 어디 있는지 감도 안 잡히는 경우가 생기죠. 그래서 직접 만든 게 Gemini Folder Manager입니다. 폴더로 묶고, 핀 고정하고, 검색까지 — 필요한 부분만 골라 읽으셔도 됩니다.

설치 및 시작

Chrome 브라우저에서 Chrome 웹 스토어에 접속해 Gemini Folder Manager를 검색하고 Chrome에 추가를 클릭합니다.
설치 후 gemini.google.com을 열어두세요. Gemini 탭이 반드시 열려 있어야 확장이 작동합니다.
브라우저 오른쪽 상단의 확장 아이콘을 클릭하고 Gemini Folder Manager를 선택하면 사이드 패널이 열립니다.
사이드 패널 상단의 새로고침 버튼을 누르면 현재 Gemini의 대화 목록을 불러옵니다.

처음 실행 시 Gemini 탭에서 대화 목록을 자동으로 스크롤하며 수집합니다. 대화가 많을수록 조금 걸릴 수 있으니 탭을 닫지 말고 잠깐 기다려 주세요.

화면 구성

탭 전환

폴더 정리 / 휴지통

새로고침

Gemini에서 최신 대화 가져오기

+ 폴더

새 폴더 만들기

✏️ 편집 모드

순서·이름·색상 편집, 하위 폴더 추가

☑ 일괄 선택

여러 대화 한 번에 이동·삭제

⚙ 설정

언어·테마·글자 크기 등 전체 옵션

폴더 관리

폴더 만들기

상단 + 폴더 버튼 클릭 → 이름 입력 → Enter 또는 만들기. 폴더 이름은 최대 40자, 중복 불가합니다.

v3.7에서는 폴더(하위 폴더 포함) 최대 7개까지 만들 수 있어요.

✏️ 편집 모드 기능

상단 편집 모드 버튼을 켜면 폴더마다 조작 버튼이 나타납니다.

버튼	기능
✏️	폴더 이름 변경
	색상 선택 — 5가지 프리셋 + 직접 입력(커스텀)
	PIN 잠금 설정 / 해제
	폴더 삭제 (내부 대화 함께 삭제 여부 선택 가능)
⠿ (드래그)	폴더 순서 드래그 앤 드롭으로 변경

하위 폴더

편집 모드에서 원하는 폴더 하단 입력창에 이름을 입력하고 + 추가를 누르거나, 폴더를 우클릭해서 하위 폴더 추가를 선택하면 됩니다.

하위 폴더는 └ 이름 형태로 표시되며, 채팅 배정 시 선택할 수 있습니다.

우클릭 컨텍스트 메뉴 (폴더)

폴더 헤더를 우클릭하면 이름 변경 · 색상·아이콘 · 하위 폴더 추가 · 잠금 · 전체 선택 · 폴더 삭제 메뉴가 바로 뜹니다.

채팅 배정

폴더에 채팅 넣기

채팅 항목을 우클릭 → 폴더로 이동 → 원하는 폴더 선택하면 됩니다.

우클릭 메뉴 전체 항목

메뉴 항목	설명
고정 / 해제	최상단 고정 섹션에 표시
✏️ 이름 변경	앱 내에서만 표시되는 로컬 별칭 설정
폴더로 이동	하위 폴더 포함 선택해서 이동
링크 복사	해당 대화 URL을 클립보드에 복사
휴지통으로	7일 후 자동 영구 삭제

대화 이름 변경 (로컬 별칭)

편집 모드에서 채팅 제목을 더블클릭하거나 우클릭 → 이름 변경으로 별칭을 붙일 수 있어요. 변경한 이름은 이 앱 안에서만 보이고, Gemini 원본에는 전혀 영향을 주지 않습니다.

설정에서 내가 바꾼 대화 이름 유지를 켜두면 새로고침 후에도 별칭이 사라지지 않습니다.

핀 고정

자주 쓰는 채팅을 목록 맨 위 고정된 대화 섹션에 올려둘 수 있습니다.

채팅 우클릭 → 고정 / 고정 해제
고정된 채팅도 폴더 배정이 가능합니다 (두 곳 모두에 표시됩니다).
고정 순서는 가장 최근에 고정한 항목이 맨 앞에 옵니다.

검색·필터·정렬

검색

상단 검색창에 입력하면 채팅 제목을 실시간으로 필터링합니다. 0.18초 딜레이 후 적용되어 타이핑하면서 바로 확인할 수 있어요.

필터

필터	표시 대상
전체	모든 대화
고정됨	핀 고정한 대화만
미분류	폴더에 배정되지 않은 대화

↕ 정렬

옵션	설명
기본	Gemini 원본 순서 (최신 대화 상단) 현재 사용 가능
이름 A→Z	가나다 오름차순 차기 버전
이름 Z→A	가나다 내림차순 차기 버전
미분류 우선	폴더 미배정 대화를 맨 앞으로 차기 버전

☑ 일괄 선택 (Batch)

상단 ☑ 버튼 클릭 → 각 대화 옆에 체크박스가 나타납니다.
체크박스로 개별 선택. Shift + 클릭으로 범위 선택도 됩니다.
전체 선택 버튼으로 현재 화면의 모든 항목을 한 번에 선택·해제.
하단 바에서 폴더를 고른 뒤 이동 또는 일괄 삭제.

폴더 우클릭 → 전체 선택으로 해당 폴더 안의 대화를 한 번에 선택할 수 있어요.

폴더 잠금 (PIN)

편집 모드 → 폴더의 버튼, 또는 폴더 우클릭 → 잠금 설정.
4~6자리 PIN을 입력하면 잠금이 활성화됩니다. 잠긴 폴더에는 아이콘이 표시됩니다.
잠긴 폴더를 열려면 PIN을 입력하면 되고, 앱 재시작 시 다시 잠깁니다.
잠금 변경·해제는 현재 PIN 확인 후 새 PIN 설정 또는 공란으로 두면 됩니다.

v3.7에서는 1개의 폴더에만 PIN 잠금을 설정할 수 있습니다.

PIN은 기기 로컬에만 저장됩니다. 분실 시 복구가 불가능하니 반드시 기억해 두세요.

휴지통

채팅 우클릭 → 휴지통으로 → 2.5초 이내에 같은 동작 반복 시 실제 이동 (실수 방지 2단계 구조).
휴지통에 들어간 대화는 7일 후 자동 영구 삭제됩니다.
상단 휴지통 탭에서 목록 확인. 복원 버튼으로 원래 폴더로 돌려놓을 수 있습니다.
즉시 영구 삭제: 버튼 → 3초 내 재클릭. 전체 비우기는 휴지통 탭 상단 버튼.

영구 삭제 및 전체 비우기는 Gemini에서도 실제로 삭제됩니다. 되돌릴 수 없으니 신중하게 사용하세요.

프로필

한 브라우저에서 여러 Google 계정의 Gemini를 사용한다면, 프로필별로 폴더 구조를 완전히 분리해서 관리할 수 있습니다.

사이드 패널 상단 드롭다운에서 현재 프로필 확인 및 전환.
+ 추가로 새 프로필 생성 (이름 지정 가능). v3.7에서는 최대 2개까지 만들 수 있습니다.
각 프로필은 폴더·설정이 완전히 독립적으로 관리됩니다.

⚙ 설정 안내

다른 기기 삭제 시 확인 묻기

새로고침 시 Gemini에 없는 대화가 감지되면 확인 모달 표시기본: ON

내가 바꾼 대화 이름 유지

새로고침 후에도 로컬 별칭 유지기본: ON

언어

KO (한국어) / EN (English) / JA (日本語)기본: KO

테마

다크 / ☀️ 라이트기본: 다크

글자 크기

기본(13px) / 중간(15px) / 크게(17px) / 최대(19px)기본: 기본

동기화 방식

로컬만 저장 (Cloud 동기화는 차기 버전 예정)기본: 로컬

ABC 글자 크기 조절

설정 → 글자 크기 섹션에서 4단계로 조절할 수 있습니다. 텍스트 크기만 바뀌고 레이아웃(패딩·간격·테두리)은 그대로라 UI가 깨지지 않아요.

기본
13px

중간
15px

크게
17px

최대
19px

FAQ

❓ 자주 묻는 질문

새로고침 버튼을 눌렀는데 대화가 안 보여요.

Gemini 탭이 반드시 열려 있어야 합니다. 탭을 먼저 열고 다시 시도해 보세요.

이름을 바꿨는데 Gemini에서도 바뀌나요?

아닙니다. 이름 변경은 이 앱 안에서만 보이는 별칭입니다. Gemini 원본에는 전혀 영향을 주지 않아요.

폴더 구조가 갑자기 사라졌어요.

Chrome 프로파일 데이터가 초기화됐을 수 있습니다. 중요한 구조는 미리 정리해 두는 게 좋습니다.

Google Drive 동기화는 언제 가능한가요?

현재 준비 중인 기능입니다. 업데이트 공지를 확인해 주세요.

Official User Guide

Gemini Folder Manager v3.7

Chrome Extension · Conversation Organizer

Once you have dozens of Gemini conversations, finding the right one gets painful fast. Gemini Folder Manager lets you organize them into folders, pin your favorites, and search by title — all without leaving the side panel. Pick any section below to jump right in.

Install & Setup

Open the Chrome Web Store, search for Gemini Folder Manager, and click Add to Chrome.
After installing, open gemini.google.com. The extension only works when a Gemini tab is open.
Click the extension icon in the top-right of Chrome and select Gemini Folder Manager to open the side panel.
Click the Refresh button at the top of the panel to load your conversations.

On first launch, the extension scrolls through the Gemini tab to collect all conversations. This may take a moment if you have many — just leave the tab open and wait.

Interface Overview

Tabs

Folders / Trash

Refresh

Fetch latest conversations from Gemini

+ Folder

Create a new folder

✏️ Edit Mode

Reorder, rename, recolor, add subfolders

☑ Batch

Select multiple chats to move or delete

⚙ Settings

Language, theme, font size, and more

Folder Management

Creating Folders

Click + Folder at the top, type a name, then press Enter or click Create. Folder names are limited to 40 characters and must be unique.

v3.7 supports up to 7 folders total (including subfolders).

✏️ Edit Mode

Toggle Edit Mode to reveal controls on each folder.

Button	Function
✏️	Rename the folder
	Choose a color — 5 presets or a custom hex value
	Set or remove a PIN lock
	Delete folder (choose whether to delete chats inside)
⠿ (drag)	Drag to reorder folders

Subfolders

In Edit Mode, type a name in the input below any folder and click + Add. Or right-click the folder and choose Add Subfolder. Subfolders appear as └ name and can be selected when assigning chats.

Right-click Context Menu (Folder)

Right-click any folder header for quick access: Rename · Color · Add Subfolder · Lock · Select All · Delete.

Assigning Chats

Moving a Chat to a Folder

Right-click a chat → Move to Folder → select the folder (or subfolder).

Right-click Menu Options

Option	Description
Pin / Unpin	Show in the pinned section at the top
✏️ Rename	Set a local alias (only visible in this app)
Move to Folder	Move to a folder or subfolder
Copy Link	Copy the chat URL to clipboard
Trash	Move to trash (auto-deleted after 7 days)

Local Aliases (Rename)

Double-click a title in Edit Mode, or right-click → Rename. The new name only appears inside this app — Gemini's original title is unchanged.

Enable Keep my renamed titles in Settings so aliases persist after a refresh.

Pinning Chats

Pin frequently used chats to the Pinned section at the very top of the list.

Right-click a chat → Pin (or Unpin to remove).
Pinned chats can still be assigned to folders — they'll appear in both places.
The most recently pinned chat appears first.

Search · Filter · Sort

Type in the search bar at the top to filter chats by title in real time (0.18s debounce).

Filters

Filter	Shows
All	Every conversation
Pinned	Only pinned chats
Unassigned	Chats not in any folder

↕ Sort

Option	Description
Default	Gemini's original order (newest first) Available
Name A→Z	Alphabetical ascending Coming soon
Name Z→A	Alphabetical descending Coming soon
Unassigned first	Unfoldered chats at the top Coming soon

☑ Batch Select

Click the ☑ button at the top — checkboxes appear next to each chat.
Click checkboxes individually or use Shift + click to select a range.
Use Select All to select or deselect everything on screen.
Pick a folder in the bottom bar, then click Move or Delete.

Right-click a folder → Select All to instantly select every chat inside it.

Folder Lock (PIN)

Edit Mode → click the button on a folder, or right-click → Lock.
Enter a 4–6 digit PIN. The folder shows a icon when locked.
Click a locked folder to enter the PIN. It unlocks temporarily and re-locks on restart.
To change or remove the lock, confirm the current PIN, then set a new one (or leave blank to remove).

v3.7 supports locking 1 folder at a time.

The PIN is stored locally only. There is no recovery option if you forget it.

Trash

Right-click a chat → Trash → repeat within 2.5 seconds to confirm (two-step safety check).
Trashed chats are permanently deleted after 7 days.
Open the Trash tab to view the list and use Restore to bring chats back.
Permanent delete: click button → click again within 3 seconds. Empty all: button in the Trash tab header.

Permanent deletion and emptying trash also deletes chats from Gemini. This cannot be undone.

Profiles

If you use multiple Google accounts with Gemini, profiles let you keep completely separate folder structures for each.

Use the dropdown at the top of the panel to switch between profiles.
Click + to add a new profile (you can name it). v3.7 supports up to 2 profiles.
Each profile has its own independent folders and settings.

⚙ Settings

Confirm on deleted chat

Show a confirmation modal when a chat is missing after refreshDefault: ON

Keep renamed titles

Preserve local aliases after refreshingDefault: ON

Language

KO · EN · JADefault: KO

Theme

Dark / ☀️ LightDefault: Dark

Font size

Default (13px) / Medium (15px) / Large (17px) / XL (19px)Default: Default

Sync mode

Local only (Cloud sync coming in a future version)Default: Local

FAQ

❓ FAQ

The refresh button isn't loading my chats.

Make sure a Gemini tab is open in Chrome. If it's closed, open gemini.google.com and try again.

Does renaming a chat change it in Gemini?

No. Renamed titles are local aliases only. Gemini's original title is not affected at all.

My folder structure disappeared.

This can happen if Chrome clears your extension data. There's no built-in backup in v3.7, so try to keep your folder structure simple and reproducible.

When is Google Drive sync coming?

It's in the works. Stay tuned for update announcements.

公式使用ガイド

Gemini Folder Manager v3.7

Chrome拡張機能 · 会話フォルダー整理ツール

Geminiを使い続けると、会話がどんどん増えていきますよね。50件、100件を超えたあたりから、目的の会話を探すのが一苦労になってきます。そこで作ったのが Gemini Folder Manager です。フォルダーで分類して、よく使う会話をピン留めして、タイトルで検索できます。必要なセクションだけ読み飛ばしてOKです。

インストールと開始

Chrome ウェブストアで「Gemini Folder Manager」を検索し、Chromeに追加をクリックします。
インストール後、gemini.google.com を開いてください。Geminiタブが開いていないと拡張機能は動作しません。
Chromeの右上にある拡張機能アイコンをクリックし、Gemini Folder Managerを選択するとサイドパネルが開きます。
パネル上部の更新ボタンをクリックすると、Geminiの会話一覧を読み込みます。

初回起動時は、GeminiタブをスクロールしながらAIがすべての会話を収集します。会話数が多いほど時間がかかるので、タブを閉じずにしばらく待ってください。

画面構成

タブ

フォルダー整理 / ゴミ箱

更新

Geminiから最新の会話を取得

+ フォルダー

新しいフォルダーを作成

✏️ 編集モード

並び替え・名前変更・色変更・サブフォルダー追加

☑ 一括選択

複数の会話をまとめて移動・削除

⚙ 設定

言語・テーマ・フォントサイズなど

フォルダー管理

フォルダーの作成

上部の+ フォルダーボタンをクリックし、名前を入力してEnterまたは「作成」をクリックします。フォルダー名は最大40文字、重複不可です。

v3.7では、サブフォルダー込みで最大7つまで作成できます。

✏️ 編集モード

編集モードをオンにすると、各フォルダーに操作ボタンが表示されます。

ボタン	機能
✏️	フォルダー名の変更
	色の選択 — 5色プリセット＋カスタム
	PINロックの設定・解除
	フォルダーの削除（内部の会話も一緒に削除するか選択可）
⠿（ドラッグ）	ドラッグ＆ドロップでフォルダーを並び替え

サブフォルダー

編集モードでフォルダー下部の入力欄に名前を入力して「＋追加」をクリックするか、フォルダーを右クリックしてサブフォルダーを追加を選択します。サブフォルダーは └ 名前 の形式で表示されます。

右クリックメニュー（フォルダー）

フォルダーヘッダーを右クリックすると、名前変更・色変更・サブフォルダー追加・ロック・全選択・削除のメニューがすぐに表示されます。

チャットの割り当て

フォルダーにチャットを入れる

チャットを右クリック → フォルダーへ移動 → 対象フォルダーを選択します。

右クリックメニューの項目

メニュー	説明
ピン留め / 解除	一覧最上部のピン留めセクションに表示
✏️ 名前の変更	このアプリ内でのみ表示されるローカルエイリアスを設定
フォルダーへ移動	サブフォルダー含め選択して移動
リンクをコピー	チャットURLをクリップボードにコピー
ゴミ箱へ	7日後に自動的に完全削除

名前の変更（ローカルエイリアス）

編集モードでタイトルをダブルクリック、または右クリック → 名前の変更で別名を付けられます。変更した名前はこのアプリ内でのみ表示され、Gemini本体には影響しません。

設定で変更した会話名を保持をオンにすると、更新後もエイリアスが維持されます。

ピン留め

よく使う会話を一覧最上部のピン留めされた会話セクションに固定できます。

チャットを右クリック → ピン留め（解除も同じ手順）。
ピン留めした会話はフォルダーにも割り当てられます（両方に表示されます）。
最後にピン留めした会話が先頭に表示されます。

検索·フィルター·並び替え

検索

上部の検索バーに入力すると、会話タイトルをリアルタイムでフィルタリングします（0.18秒のデバウンス処理）。

フィルター

フィルター	表示対象
すべて	すべての会話
ピン留め	ピン留めした会話のみ
未分類	フォルダーに割り当てられていない会話

↕ 並び替え

オプション	説明
デフォルト	Geminiの元の順序（最新が先頭）利用可能
名前 A→Z	50音順近日公開
名前 Z→A	50音逆順近日公開
未分類を先頭に	未割り当ての会話を最初に表示近日公開

☑ 一括選択

上部の☑ ボタンをクリック → 各会話の横にチェックボックスが表示されます。
チェックボックスで個別選択。Shift + クリックで範囲選択も可能です。
全選択ボタンで画面上のすべてを一括選択・解除。
下部バーでフォルダーを選んで移動、または一括削除。

フォルダーを右クリック → 全選択で、そのフォルダー内のすべての会話を一度に選択できます。

フォルダーロック（PIN）

編集モード → フォルダーのボタン、またはフォルダーを右クリック → ロックの設定。
4〜6桁のPINを入力するとロックが有効になります。ロックされたフォルダーにはアイコンが表示されます。
ロックされたフォルダーをクリックするとPIN入力欄が表示され、正しいPINを入力すると一時的に解除されます（再起動時に再ロック）。
ロックの変更・解除は、現在のPINを確認後に新しいPINを設定（空欄でロック解除）します。

v3.7では1つのフォルダーのみロックできます。

PINはデバイスのローカルにのみ保存されます。紛失した場合の復元はできません。必ず記憶しておいてください。

ゴミ箱

チャットを右クリック → ゴミ箱へ → 2.5秒以内に同じ操作を繰り返すと実際に移動します（誤操作防止の2段階確認）。
ゴミ箱に入った会話は7日後に自動的に完全削除されます。
ゴミ箱タブで一覧を確認。復元ボタンで元のフォルダーに戻せます。
即時完全削除：ボタン → 3秒以内に再クリック。全削除：ゴミ箱タブ上部のボタン。

完全削除と全削除はGeminiからも実際に削除されます。元に戻せないため、慎重に使用してください。

プロフィール

1つのブラウザで複数のGoogleアカウントのGeminiを使用する場合、プロフィールごとにフォルダー構成を完全に分けて管理できます。

パネル上部のドロップダウンで現在のプロフィールを確認・切り替え。
＋追加で新しいプロフィールを作成（名前を指定可能）。v3.7では最大2つまで作成できます。
各プロフィールは独立したフォルダーと設定を持ちます。

⚙ 設定

削除確認を表示

更新時にGeminiにない会話が検出されたら確認モーダルを表示デフォルト: ON

変更した会話名を保持

更新後もローカルエイリアスを維持デフォルト: ON

言語

KO（韓国語）/ EN（英語）/ JA（日本語）デフォルト: KO

テーマ

ダーク / ☀️ ライトデフォルト: ダーク

フォントサイズ

標準(13px) / 中(15px) / 大(17px) / 最大(19px)デフォルト: 標準

同期モード

ローカルのみ（クラウド同期は将来のバージョンで予定）デフォルト: ローカル

FAQ

❓ よくある質問

更新ボタンを押しても会話が表示されません。

Geminiタブが開いていることを確認してください。閉じている場合は gemini.google.com を開いてから再試行してください。

名前を変更するとGeminiでも変わりますか？

いいえ。名前の変更はこのアプリ内のみのローカルエイリアスです。Geminiの元のタイトルは一切変更されません。

フォルダー構成が消えてしまいました。

Chromeの拡張機能データがリセットされた可能性があります。シンプルな構成にしておくと再設定が楽です。

Google Drive同期はいつ使えますか？

現在準備中の機能です。アップデートのお知らせをご確認ください。

AI를 이용한 티스토리 웹디자인 공부 - [DAY 3] HTML → Tistory 연결

data-pantry — Thu, 23 Apr 2026 13:04:40 +0900

Day 3 — HTML → Tistory 연결

"이론 코드가 아닌, 실제 운영 코드를 해부하는 날입니다"

10초 핵심 요약

치환자: 서버가 실제 데이터로 '미리 채워서 완성하는 자리'입니다.
처리 시점: 브라우저가 파일을 받기 '전'에 서버에서 이미 완성됩니다.
오늘의 목표: 수천 줄의 코드 속에서 '레이아웃 블록'을 찾아 주석을 다는 것입니다.

1. 치환자는 "미리 완성된 값"이 들어갈 자리입니다

가장 많이 하는 오해: 치환자는 브라우저에서 변하는 '빈칸'이 아닙니다. 서버가 내용을 꽉 채워 보낸 완성품입니다.

서버에서 처리됨 (전송 전)

<h1>data-pantry 님의 블로그</h1>

서버가 이 자리에 내 블로그 제목을 미리 채워넣습니다.

브라우저가 받는 최종 결과

<h1>내 멋진 블로그</h1>

브라우저는 치환자를 전혀 알지 못합니다. 이미 완성된 텍스트만 받을 뿐이죠.

⚠️ 실전 팁: 자바스크립트(JS)로 data-pantry 님의 블로그을 직접 건드리려 해도 소용없습니다. 브라우저가 소스를 읽을 때는 이미 그 자리가 실제 값으로 교체된 후이기 때문입니다.

2. skin.html을 읽는 '레이아웃 블록' 전략

수천 줄의 코드를 한 줄씩 읽지 마세요. 큰 덩어리부터 먼저 파악하는 게 핵심입니다.

Body 내부 찾기
모든 화면 요소는 <body> 태그 안에 있습니다.

큰 레이아웃 블록 식별
단순 태그명보다 div#wrap, div#container 같은 큰 외곽 박스를 먼저 확인하세요.

<div id="container">  
   <header>...</header>
</div>

반복 블록(s_article_rep)
이 안의 내용은 JavaScript의 for문처럼 포스트 개수만큼 반복해서 출력됩니다.

주석으로 경계 표시
나만의 메모를 달아두면 나중에 수정할 위치를 바로 찾을 수 있습니다.

3. 오늘의 실습: 스킨 구조 해부하기

단순히 찾는 것을 넘어, 각 영역이 어디서 시작해서 어디서 끝나는지 범위를 파악해보세요.

확인	실습 미션 (Level 1~3)
☐	[Lv.1] `<header>` 구역의 시작과 끝 태그를 찾아 주석을 달았는가?
☐	[Lv.2] 반복 출력 블록(`s_article_rep`)의 전체 범위를 식별했는가?
☐	[Lv.3] 치환자의 역할(제목 / 본문 / 사이드바 등)을 정확히 구분했는가?
☐	[Lv.3] 사이드바가 `#container` 내부에 있는지, 바깥에 있는지 확인했는가?

1~3일차 학습 흐름 완성

Day 3: skin.html (치환자 포함 소스)

▼ 서버에서 치환자 미리 채우기 (SSR) ▼

데이터가 채워진 완성 HTML 전달

▼ 브라우저 해석 및 화면 구성 (DOM) ▼

CSS / JS 적용 및 최종 화면 출력

AI를 이용한 티스토리 웹디자인 공부 - [DAY 2] DOM 트리와 시맨틱 태그

data-pantry — Mon, 20 Apr 2026 12:40:37 +0900

Day 2 — DOM Tree와 시맨틱 태그 (개념 재정립)

오늘은 HTML을 '쓰는' 연습보다, 구조를 '읽는 눈'을 키우는 날입니다

일단 이것만

• HTML = 텍스트 파일 그 자체
• DOM = 브라우저가 그 텍스트를 읽고 만들어낸 구조체
• CSS = 그 구조 안에서 꾸밀 대상을 찾는 방법

조금 더 풀면 이렇습니다:

HTML은 결국 텍스트 파일입니다.
브라우저는 이걸 받아서 화면에 그리기 위해 내부적으로 '구조'로 변환합니다. 이게 DOM입니다.
CSS가 실제로 적용되는 대상은 원본 HTML 파일이 아니라, 브라우저가 만들어낸 이 구조(DOM)입니다.

어디에 CSS를 넣을지 찾으려면, 이 "구조(DOM)"를 읽을 수 있어야 합니다.

1. DOM Tree = 단순 구조가 아니다

많이들 헷갈리는 부분입니다. 우리가 작성한 HTML 코드가 그대로 화면이 되는 게 아닙니다. 브라우저가 이를 해석해서 '조작 가능한 객체 구조'로 새로 만들어내는데, 그게 바로 DOM(Document Object Model)입니다.
JavaScript로 실시간으로 뜯어고칠 수 있는 구조라는 뜻입니다.

HTML (파일)

서버에서 넘어오는 원본 텍스트 파일입니다.
<p>Hello</p>

DOM (브라우저 메모리)

브라우저가 HTML을 해석해서 만들어낸 트리 구조입니다. 여기서 중요한 건, "Hello" 같은 텍스트 하나도 독립된 노드로 존재한다는 점입니다.

핵심: DOM은 고정된 구조가 아닙니다. JavaScript가 언제든 바꿀 수 있는 살아있는 구조입니다.
→ 웹이 '정적인 문서'가 아니라 '움직이는 프로그램'인 이유가 여기에 있습니다.

2. CSS와 DOM 구조의 관계

CSS 선택자는 "이 구조 안에서 스타일을 줄 대상을 어떻게 찾을 것인가"의 문제입니다. DOM 구조를 모르면 CSS를 제대로 쓸 수가 없습니다.

자주 겪는 상황

.article h2 { color: red; } — article 안의 h2 제목을 빨갛게 바꾸는 코드입니다.

이게 안 먹힌다면?
→ 클래스가 생각한 위치에 없거나, 구조의 범위를 잘못 파악한 것입니다.

3. 시맨틱 태그 — 실전 판단 기준

<article>과 <section>, 어떻게 쓸지 헷갈린다면 아래 기준 하나만 기억하세요.

태그	직관적 의미	올바른 예시
<article>	"완결된 글 하나"	블로그 포스트 1개, 뉴스 기사 1개
<section>	"여러 글의 묶음"	최신 글 목록, 인기 글 영역

→ 시맨틱 태그를 제대로 쓰면 검색엔진이 콘텐츠 구조를 더 정확하게 파악합니다. SEO에 직접 영향을 줍니다.

4. 티스토리에서 꼭 알아야 할 것

⚠️ 우리는 이미 지어진 집 안에서 가구를 배치하고 있습니다.

티스토리 스킨에는 이미 뼈대 구조가 있습니다. 본문을 작성하는 건 그 구조 안의 특정 방에 내용을 채워넣는 일입니다.

[실전 원칙]
1. 스킨에 이미 있는 <main>, <header>를 본문 안에서 또 만들지 마세요.
2. 구조끼리 충돌하면 레이아웃이 무너지고, 검색 노출도 떨어집니다.

5. 실전 기술: DOM 트리 파악하기

F12(개발자 도구)로 구조를 직접 뜯어보는 연습입니다.

바꾸고 싶은 요소를 우클릭 → 검사(Inspect)합니다.

그 요소를 감싸고 있는 부모 태그가 뭔지 확인합니다.

같은 레벨에 있는 다른 요소들까지 훑으면서 전체 패턴을 잡습니다.

핵심: 구조를 볼 때는 안에서 밖으로 파고들지 말고, 요소에서 위(부모)로 거슬러 올라가면서 전체 틀을 잡아야 합니다.

6. 오늘의 실습 — 내 블로그 뼈대 찾기

목표: 코드를 읽는 게 아니라 전체 뼈대를 해석하는 것

본인 블로그의 [스킨 편집] → [HTML 편집]에 들어가서 다음 영역을 직접 찾아보세요.

최상단 <header> 찾기
메인 콘텐츠가 시작되는 <main> 또는 #mArticle 찾기
포스트가 생성되는 <article> 찾기
찾은 영역들이 서로 어떤 부모-자식 관계인지 종이에 트리로 그려보기

☑️ Day 2 완료 체크리스트

☐	HTML 파일과 브라우저가 만든 DOM 트리가 어떻게 다른지 설명할 수 있다.
☐	텍스트 노드도 DOM 구조의 일부라는 걸 이해했다.
☐	CSS는 DOM 구조를 기준으로 대상을 찾아 적용된다는 걸 이해했다.
☐	article(글 하나)과 section(글 묶음)의 쓰임을 명확히 구분할 수 있다.
☐	티스토리 스킨에는 이미 구조가 있으며, 이걸 건드리면 어떤 문제가 생기는지 이해했다.

다 체크했다면, 실습에서 그린 트리 구조를 사진으로 찍어두세요.

Next Step Day 3 — 구조를 활용한 CSS 선택자와 실전 스타일링

AI를 이용한 티스토리 웹디자인 공부 - [DAY 1] HTML 가이드

data-pantry — Thu, 16 Apr 2026 13:08:44 +0900

Tistory Skin Guide

Day 1 — 웹 작동 원리 (개념 리셋)

1. URL을 입력하면 벌어지는 일

사용자: 주소창에 URL 입력

브라우저: "서버가 어디 있지?" → DNS 조회

→ 도메인 이름을 실제 서버 주소(IP)로 변환하는 과정입니다.

요청: 브라우저 → 서버 "페이지 파일 줘" (**HTTP 요청**)

→ 서버에 "GET /index.html" 같은 메시지를 보내 콘텐츠를 요청합니다.

응답: 서버 → 브라우저 HTML 전달 (**HTTP 응답**)

렌더링: 브라우저가 HTML 해석 → 화면 출력

왜 배울까요? 이 과정을 이해해야 웹이 단순한 화면이 아니라 '요청과 응답'으로 이루어진 구조라는 것을 알 수 있기 때문입니다.

핵심: 브라우저가 받는 것은 결국 텍스트 파일입니다.

→ 이 텍스트를 구조(DOM)로 바꾸는 것이 브라우저의 핵심 역할입니다.

2. SSR vs CSR (티스토리 핵심 이해)

SSR (Server-Side)

서버가 HTML을 완성해서 전달

이미 완성된 HTML을 수신
데이터가 HTML 안에 이미 존재
첫 화면이 빠르고 SEO에 유리

CSR (Client-Side)

브라우저(JS)가 HTML을 생성

텅 빈 HTML과 JS를 수신
브라우저에서 동적으로 생성
동적인 사용자 경험에 최적화

⚠️ 티스토리는 SSR 기반입니다!

치환자는 서버에서 처리되므로 자바스크립트(JS)로 직접 제어할 수 없습니다. JS는 렌더링된 결과물에 '효과'를 주는 보조 도구일 뿐입니다.

SSR은 처음 화면이 빠르게 보이고, 검색 엔진(SEO)에 노출되기 유리합니다.

3. 오늘의 실습 (F12 활용)

체크포인트	확인
블로그 제목이 HTML에 텍스트로 들어있는가?	☐
포스트 제목이 실제 텍스트로 보이는가?	☐
HTML 구조 안에 <header>, <main> 같은 태그가 보이는가?	☐