nana's commit-log

[퍼블리셔 복기 시리즈] 기본 모달 vanilla JS vs jQuery

Fri, 07 Aug 2026 04:53:21 GMT

codepen⚡

!codepen[editor/na-hyeong9/embed/019fd9fb-50f4-73b8-b9ce-06e0a3ce98ee?default-tab=html%2Cresult]

Day 5 · 모달 팝업 (바닐라 + jQuery)

버튼을 누르면 뜨고, 바깥/X/ESC로 닫히는 창. 핵심은 오버레이 클릭 판별(이벤트 버블링)과 ESC 키 처리, 그리고 접근성이다. JS는 일반 함수 기준.

핵심 3가지

① 오버레이 클릭 판별 어두운 배경(오버레이)을 누르면 닫히고, 모달 안쪽을 누르면 안 닫혀야 한다. event.target이 오버레이 자신인지 확인해서 구분한다.

② ESC 키로 닫기 키보드 사용자를 위해 ESC로도 닫히게 한다.

③ 접근성 열릴 때 포커스를 모달로 옮기고, role="dialog", aria-modal="true"를 붙인다.

HTML (공통)


  
  
  
  

  
  
    
      
      ✨
      글래스모피즘
      반투명 유리 질감에 배경이 흐릿하게 비쳐 보이는 요즘 유행하는 스타일이에요.
      
        
        
      
    
  

  
  
    
      
      📄
      미니멀 클린
      군더더기 없이 깔끔한 흑백 기반 디자인. 어디에나 잘 어울려요.
      
        
        
      
    
  

  
  
    
      
      🚀
      그라데이션
      화사한 보라-파랑 그라데이션으로 시선을 끄는 화려한 스타일이에요.
      
        
        
      
    
  

  
  
    
      
      🌸
      파스텔 귀여움
      부드러운 핑크 파스텔톤에 둥근 테두리로 귀엽고 사랑스러운 느낌이에요.

CSS (공통)

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 14px; padding: 40px 20px;
  background: linear-gradient(135deg, #fff3ed 0%, #ffe8f0 100%);
  font-family: system-ui, sans-serif;
}

.open-btn {
  padding: 14px 22px;
  border: none; border-radius: 14px;
  background: #fff; color: #6c5ce7;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transition: transform .2s, box-shadow .2s;
}
.open-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }

.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .25s ease;
}
.overlay[hidden] { display: none; }

.modal {
  position: relative;
  max-width: 380px; width: 100%;
  padding: 36px 32px;
  animation: popIn .3s cubic-bezier(.68,-0.55,.27,1.55);
}

.close-btn {
  position: absolute; top: 18px; right: 18px;
  width: 32px; height: 32px;
  border: none; background: rgba(0,0,0,.05);
  border-radius: 50%;
  font-size: 20px; cursor: pointer; line-height: 1;
  transition: background .2s;
}
.close-btn:hover { background: rgba(0,0,0,.12); }

.modal-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 18px;
}
.modal-title { margin: 0 0 10px; font-size: 21px; font-weight: 800; }
.modal-body { margin: 0; font-size: 14px; line-height: 1.65; }
.modal-actions { display: flex; gap: 10px; margin-top: 26px; }
.btn {
  flex: 1; padding: 13px;
  border: none; border-radius: 12px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform .15s, filter .2s;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: scale(.97); }

/* ═══ ① 글래스모피즘 ═══ */
#modal1 { background: rgba(30, 20, 60, .35); backdrop-filter: blur(8px); }
.glass {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  color: #fff;
}
.glass .close-btn { background: rgba(255,255,255,.2); color: #fff; }
.glass .close-btn:hover { background: rgba(255,255,255,.35); }
.glass .modal-icon { background: rgba(255,255,255,.2); }
.glass .modal-body { color: rgba(255,255,255,.85); }
.glass .btn-primary { background: #fff; color: #6c5ce7; }
.glass .btn-ghost { background: rgba(255,255,255,.2); color: #fff; }

/* ═══ ② 미니멀·클린 ═══ */
#modal2 { background: rgba(0,0,0,.4); }
.clean {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  color: #1a1a1a;
}
.clean .modal-icon { background: #f0f0f5; }
.clean .modal-title { color: #1a1a1a; }
.clean .modal-body { color: #666; }
.clean .btn-primary { background: #1a1a1a; color: #fff; }
.clean .btn-ghost { background: #f0f0f0; color: #555; }

/* ═══ ③ 그라데이션 ═══ */
#modal3 { background: rgba(20,0,40,.5); }
.gradient {
  background: linear-gradient(145deg, #667eea 0%, #764ba2 100%);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(118,75,162,.5);
  color: #fff;
}
.gradient .close-btn { background: rgba(255,255,255,.2); color: #fff; }
.gradient .close-btn:hover { background: rgba(255,255,255,.35); }
.gradient .modal-icon {
  background: rgba(255,255,255,.2);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.gradient .modal-body { color: rgba(255,255,255,.9); }
.gradient .btn-primary { background: #fff; color: #764ba2; }
.gradient .btn-ghost { background: rgba(255,255,255,.2); color: #fff; }

/* ═══ ④ 파스텔·귀여움 ═══ */
#modal4 { background: rgba(255, 182, 193, .35); backdrop-filter: blur(4px); }
.pastel {
  background: #fff;
  border: 3px solid #ffd6e8;
  border-radius: 28px;
  box-shadow: 0 16px 48px rgba(255,150,190,.35);
  color: #6b4a5a;
}
.pastel .close-btn { background: #ffe8f0; color: #d67ba0; }
.pastel .close-btn:hover { background: #ffd0e4; }
.pastel .modal-icon { background: #ffe8f0; }
.pastel .modal-title { color: #d15b8a; }
.pastel .modal-body { color: #9a7684; }
.pastel .btn-primary { background: #ff9ec4; color: #fff; }
.pastel .btn-ghost { background: #fff0f6; color: #d67ba0; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  from { opacity: 0; transform: scale(.9) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .overlay, .modal { animation: none !important; }
}

버전 ① 바닐라 JS

var openButtons = document.querySelectorAll(".open-btn");
var closeButtons = document.querySelectorAll(".js-close");
var overlays = document.querySelectorAll(".overlay");
var lastFocused = null;

openButtons.forEach(function (btn) {
  btn.addEventListener("click", function () {
    var overlay = document.getElementById(this.getAttribute("data-target"));
    openModal(overlay);
  });
});

closeButtons.forEach(function (btn) {
  btn.addEventListener("click", function () {
    closeModal(this.closest(".overlay"));
  });
});

overlays.forEach(function (overlay) {
  overlay.addEventListener("click", function (e) {
    if (e.target === overlay) closeModal(overlay);
  });
});

document.addEventListener("keydown", function (e) {
  if (e.key === "Escape") {
    var open = document.querySelector(".overlay:not([hidden])");
    if (open) closeModal(open);
  }
});

function openModal(overlay) {
  lastFocused = document.activeElement;
  overlay.hidden = false;
  var target = overlay.querySelector(".close-btn");
  if (target) target.focus();
}

function closeModal(overlay) {
  overlay.hidden = true;
  if (lastFocused) lastFocused.focus();
}

버전 ② jQuery

var $lastFocused = null;

// 열기
$(".open-btn").on("click", function () {
  var targetId = $(this).data("target");
  openModal($("#" + targetId));
});

// 닫기 (X, 취소)
$(".js-close").on("click", function () {
  closeModal($(this).closest(".overlay"));
});

// 오버레이 바깥 클릭
$(".overlay").on("click", function (e) {
  if (e.target === this) closeModal($(this));
});

// ESC로 닫기
$(document).on("keydown", function (e) {
  if (e.key === "Escape") {
    var $open = $(".overlay").not("[hidden]");
    if ($open.length) closeModal($open);
  }
});

function openModal($overlay) {
  $lastFocused = document.activeElement;
  $overlay.prop("hidden", false);
  $overlay.find(".close-btn").first().focus();
}

function closeModal($overlay) {
  $overlay.prop("hidden", true);
  if ($lastFocused) $lastFocused.focus();
}

이벤트 버블링이 핵심

오버레이 바깥 클릭 판별이 이 챌린지의 핵심이다.

overlay.addEventListener("click", function (e) {
  if (e.target === overlay) {   // ← 이 조건
    closeModal(overlay);
  }
});

오버레이 안에 모달이 들어있어서, 모달을 클릭해도 그 클릭이 부모인 오버레이까지 전파(버블링) 된다. 그냥 오버레이 클릭 = 닫기로 하면, 모달 안을 눌러도 닫혀버린다.

e.target은 실제로 클릭된 요소다. 오버레이 자신을 눌렀을 때만 e.target === overlay가 참이 된다. 모달 안쪽을 누르면 e.target은 모달이라 조건이 거짓이 되어 안 닫힌다.

오버레이 클릭 → e.target = 오버레이 → 닫힘 ✅
모달 안 클릭  → e.target = 모달   → 안 닫힘 ✅

두 버전 비교

작업	바닐라	jQuery
data 속성 읽기	`getAttribute("data-target")`	`.data("target")`
가장 가까운 부모	`.closest(".overlay")`	`.closest(".overlay")`
hidden 설정	`.hidden = true`	`.prop("hidden", true)`
조건부 선택	`querySelector(":not([hidden])")`	`.not("[hidden]")`

closest는 바닐라에도 있어서 jQuery랑 거의 같다. data 속성 읽기는 jQuery의 .data()가 조금 더 짧다.

접근성 포인트

role="dialog" + aria-modal="true" 스크린리더에게 "지금 대화상자가 열렸고, 이것만 조작 가능하다"고 알린다.

aria-labelledby 모달 제목과 연결해서, 열릴 때 제목을 읽어준다.

포커스 이동 & 복귀 열 때 모달 안으로 포커스를 옮기고(focus()), 닫을 때 원래 있던 버튼으로 되돌린다(lastFocused). 키보드 사용자가 길을 잃지 않게 하는 필수 처리다.

닫기 버튼에 aria-label X 버튼은 × 기호뿐이라 스크린리더가 못 읽는다. aria-label="닫기"로 이름을 준다.

실험 포인트

popIn 이징 바꾸기: cubic-bezier(.68,-0.55,.27,1.55)를 ease로 → 튐 없이 부드럽게
오버레이 배경 흐리기: .overlay에 backdrop-filter: blur(4px) 추가 → 뒤가 흐려짐
body 스크롤 잠그기 (심화): 모달 열릴 때 document.body.style.overflow = "hidden"으로 뒤 스크롤 막기
포커스 트랩 (심화): Tab이 모달 밖으로 못 나가게 가두기

기록용 한 줄

뭘 만들었나: 바깥/X/ESC로 닫히는 모달 2종 (바닐라 + jQuery)
어디서 막혔나: 모달 안을 눌러도 닫혀버림 → e.target === overlay 조건으로 오버레이 자신일 때만 닫도록 해결
뭘 알게 됐나: 이벤트 버블링 때문에 자식 클릭도 부모로 전파된다. e.target으로 진짜 클릭 지점을 구분하는 게 핵심

[JS] 모던 자바스크립트부터 다시 시작 - 7 - 프로토타입

Mon, 27 Jul 2026 04:53:05 GMT

지난 편에서 this를 다뤘다. 이번엔 자바스크립트의 상속 방식 프로토타입을 짧게 정리한다. class 문법 뒤에 숨은 구조다.

자바스크립트엔 원래 class가 없었다

ES6 전까지 class 문법이 없었다. 대신 프로토타입(Prototype) 으로 상속을 구현했다. 지금 쓰는 class도 사실 프로토타입을 감싼 문법일 뿐이다.

객체는 부모를 참조한다

모든 객체는 자신의 부모 역할을 하는 객체(프로토타입)를 가리키는 숨은 링크가 있다.

const obj = { name: 'Alice' };

console.log(obj.toString); // 함수 — 만든 적 없는데 있다

toString을 만든 적 없는데 쓸 수 있다. obj에 없으면 프로토타입을 타고 올라가서 찾기 때문이다.

프로토타입 체인

없으면 위로, 또 없으면 더 위로 찾아 올라가는 사슬이다.

obj → Object.prototype → null

스코프 체인이 변수를 위로 찾는 것과 닮았다. 이건 속성을 위로 찾는다.

prototype에 메서드를 두는 이유

function User(name) {
  this.name = name;
}
User.prototype.greet = function () {
  console.log(this.name);
};

const a = new User('Alice');
const b = new User('Bob');
a.greet(); // Alice
b.greet(); // Bob

greet를 인스턴스마다 만들지 않고 prototype에 한 번만 만든다. a, b가 그걸 공유한다. 인스턴스 100개를 만들어도 함수는 하나다.

class는 프로토타입이다

class User {
  constructor(name) { this.name = name; }
  greet() { console.log(this.name); }
}

깔끔하지만 동작은 위 생성자 함수와 똑같다. greet는 여전히 User.prototype에 들어간다.

console.log(typeof User); // 'function' — class도 함수다

class는 문법적 설탕(Syntactic Sugar)이다. async/await가 Promise를 감쌌듯, class는 프로토타입을 감쌌다.

오늘 얻은 것

자바스크립트는 없는 속성을 프로토타입 체인을 타고 위로 찾는다. prototype에 메서드를 두면 인스턴스가 공유해서 효율적이고, class는 이걸 보기 좋게 감싼 문법이다. 결국 뿌리는 프로토타입이다.

다음 편은 모듈 시스템 import/export와 CommonJS vs ESM을 정리할 예정이다.

[퍼블 복기 시리즈] 탭 탭 탭 탭 전환

Sat, 25 Jul 2026 14:49:31 GMT

본인은 탭 전환을 제이쿼리로 만든 기억이 많다. 그래서! 이번엔 JS랑 jQuery 비교 버전을 만들어 볼 것이다. (갑자기 든 생각인데 둘의 비교 버전 시리즈도 만들어봐야겠다. 나란 사람 성인 ADHD의 표본...ㅎㅎㅎ)

잡담은 이만하고 복기 시리즈 레쓰고

Day 4 · 탭 전환 (바닐라 + jQuery)

탭을 누르면 해당 콘텐츠만 보이는 UI. 여러 요소 중 "지금 활성인 하나"를 관리하는 감각을 익히는 게 목적이다. JS는 일반 함수(function) 기준으로 작성했다. 이벤트 핸들러에서 this를 쓰기 좋기 때문이다.

핵심 아이디어

탭은 "여러 개 중 하나만 활성"이라는 구조다.

[탭1] [탭2] [탭3]   ← 하나만 활성 표시
─────────────────
   활성 탭의 내용만 보임

아코디언은 여러 개가 동시에 열릴 수 있지만, 탭은 항상 정확히 하나만 보인다. 새 탭을 누르면 이전 탭을 꺼주는 처리가 필요하다.

codepen

!codepen[editor/na-hyeong9/embed/019f99c2-a02a-7dd6-879a-d3e64ad5a928?default-tab=html%2Cresult]

왜 일반 함수를 쓰나???

이벤트 핸들러 안에서 this는 이벤트가 걸린 요소를 가리킨다. 일반 함수라야 이게 성립한다.

// 일반 함수 — this = 클릭한 탭
tab.addEventListener('click', function () {
  this.classList.add('active'); // 정상
});

// 화살표 함수 — this = 상위 스코프(window)
tab.addEventListener('click', () => {
  this.classList.add('active'); // this가 탭이 아님, 원하는 대로 안 됨
});

특히 jQuery는 $(this) 패턴이 핵심이라 일반 함수가 훨씬 자연스럽다.

HTML (두 버전 공통)


  탭 전환 예제

  
    
      
      
      
      
    

    
      상품정보
      이 상품의 소재, 사이즈, 원산지 등 기본 정보를 담고 있습니다.
    
    
      리뷰
      실제 구매자들이 남긴 후기입니다. 평점과 사진 리뷰를 확인할 수 있어요.
    
    
      Q&A
      상품에 대한 궁금한 점을 질문하고 답변을 받을 수 있는 공간입니다.

CSS (두 버전 공통)

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff3ed;
  font-family: system-ui, sans-serif;
  padding: 20px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.wrap { width: 100%; max-width: 480px; }

.tabs {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  overflow: hidden;
}

.tab-list {
  position: relative;
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab {
  flex: 1;
  padding: 16px 8px;
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 600;
  color: #999;
  cursor: pointer;
  transition: color .25s;
  font-family: inherit;
}
.tab:hover { color: #6c5ce7; }
.tab.active { color: #6c5ce7; }
.tab:focus-visible {
  outline: 3px solid #2d3436;
  outline-offset: -3px;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 33.333%;
  background: #6c5ce7;
  border-radius: 3px;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.panel {
  padding: 24px;
  animation: fade .3s ease;
}
.panel h3 { margin: 0 0 10px; font-size: 16px; color: #2d2540; }
.panel p { margin: 0; font-size: 14px; line-height: 1.7; color: #5c5470; }

@keyframes fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tab-indicator, .tab { transition: none !important; }
  .panel { animation: none !important; }
}

버전 ① 바닐라 JS (일반 함수)

var tabs = document.querySelectorAll('.tab');
var panels = document.querySelectorAll('.panel');
var indicator = document.querySelector('.tab-indicator');

tabs.forEach(function (tab, index) {
  tab.addEventListener('click', function () {
    // 1. 모든 탭·패널 비활성화
    tabs.forEach(function (t) {
      t.classList.remove('active');
      t.setAttribute('aria-selected', 'false');
    });
    panels.forEach(function (p) {
      p.classList.remove('active');
      p.hidden = true;
    });

    // 2. 클릭한 탭만 활성화 (this = 클릭한 탭)
    this.classList.add('active');
    this.setAttribute('aria-selected', 'true');

    // 3. 짝이 되는 패널 켜기
    var panelId = this.getAttribute('aria-controls');
    var panel = document.getElementById(panelId);
    panel.classList.add('active');
    panel.hidden = false;

    // 4. 밑줄을 클릭한 탭 위치로 이동
    indicator.style.transform = 'translateX(' + index * 100 + '%)';
  });
});

버전 ② jQuery (일반 함수)

$('.tab').on('click', function () {
  // index() — 형제 중 몇 번째인지
  var index = $(this).index();

  // 1. 모든 탭·패널 비활성화
  $('.tab').removeClass('active').attr('aria-selected', 'false');
  $('.panel').removeClass('active').prop('hidden', true);

  // 2. 클릭한 탭만 활성화 ($(this) = 클릭한 탭)
  $(this).addClass('active').attr('aria-selected', 'true');

  // 3. 짝이 되는 패널 켜기
  var panelId = $(this).attr('aria-controls');
  $('#' + panelId).addClass('active').prop('hidden', false);

  // 4. 밑줄 이동
  $('.tab-indicator').css('transform', 'translateX(' + index * 100 + '%)');
});

두 버전 비교

같은 동작을 나란히 놓으면 jQuery가 얼마나 짧아지는지 보인다.

작업	바닐라	jQuery
요소 선택	`document.querySelectorAll`	`$('.tab')`
클래스 추가	`el.classList.add('x')`	`.addClass('x')`
클래스 제거	`el.classList.remove('x')`	`.removeClass('x')`
속성 설정	`el.setAttribute('a','b')`	`.attr('a','b')`
여러 요소 한 번에	`forEach`로 반복	알아서 전체 적용
몇 번째인지	직접 index 전달	`$(this).index()`

jQuery는 선택한 여러 요소에 메서드를 한 번에 적용해준다. 바닐라는 forEach로 하나씩 돌려야 하는 걸, jQuery는 $('.tab').removeClass('active') 한 줄로 끝낸다.

다만 요즘은 바닐라 JS만으로도 충분히 간결해졌고, 프레임워크(React 등)를 쓰면 jQuery를 거의 안 쓴다. SI/퍼블리싱 실무에서는 여전히 jQuery를 만나는 경우가 많으니 둘 다 익혀두면 좋다.

흐름 정리

두 버전 다 핵심은 "전부 끄고 → 하나만 켜기"다.

탭 클릭
  → 모든 탭·패널 OFF   (한 번 싹 비운다)
  → 클릭한 탭만 ON
  → 짝 패널만 ON
  → 밑줄 이동

한 번에 모두 끈 다음 하나만 켜면, 이전 상태를 추적할 필요가 없어서 코드가 단순해진다.

접근성 포인트

role="tablist" / role="tab" / role="tabpanel" 이 세트가 스크린리더에게 "탭 UI"임을 알린다.

aria-selected 지금 선택된 탭을 표시한다. 활성 탭만 true.

aria-controls / aria-labelledby 탭과 패널을 양방향으로 연결한다.

hidden 속성 숨긴 패널을 스크린리더가 읽지 않도록 막는다.

실험 포인트

밑줄 이징: cubic-bezier(.4,0,.2,1) → cubic-bezier(.68,-0.55,.27,1.55)로 통통 튀게
패널 전환: @keyframes fade의 translateY(6px) → translateX(20px)로 슬라이드 느낌
탭 4개로 늘리기: .tab-indicator의 width를 25%로 바꿔야 한다
키보드 좌우 화살표 지원 (심화): 지금은 Tab 키로만 이동한다. 화살표로 넘기는 기능을 넣으면 완성도가 올라간다

기록용 한 줄

뭘 만들었나: 밑줄이 따라 움직이는 탭 UI (바닐라 + jQuery)
어디서 막혔나: 새 탭 켤 때 이전 탭 끄는 걸 빼먹어 여러 개가 동시 활성화됨 → "전부 끄고 하나만 켜기"로 해결
뭘 알게 됐나: jQuery는 여러 요소에 메서드를 한 번에 적용해줘서 반복문이 사라진다. 바닐라의 forEach가 $('.tab').removeClass() 한 줄이 된다

[퍼블 복기 시리즈] 완전. 기본. 아코디언.

Mon, 20 Jul 2026 06:08:21 GMT

먼저 말씀 드릴 건 이 글은 쌩기초, 쌩초보 를 위한 글인 점을 유의해주세요. ( _ _ )

제목을 클릭하면 내용이 펼쳐지는 FAQ 형태. 이번엔 CSS만으로 안 되는 벽을 만난다. 높이 애니메이션의 함정을 직접 겪어보는 게 목적이다.

codepen ⚡

!codepen[editor/na-hyeong9/embed/019f7e07-8894-7b27-bce3-6f1262dddc44?default-tab=html%2Cresult]

버튼이나 토글은 CSS만으로 끝났다. 아코디언은 다르다.

.panel {
  height: 0;
  transition: height .3s;
}
.panel.open {
  height: auto;  /* ← 이게 안 먹는다 */
}

height: auto로는 애니메이션이 동작하지 않는다. 브라우저가 auto를 구체적인 픽셀 값으로 계산하지 못하기 때문에, 어디서 어디로 움직여야 할지 모르는 것이다.

내용의 높이는 글자 수에 따라 매번 달라진다. 그래서 이 문제를 우회하는 방법이 여러 개 생겼다. 셋 다 만들어보고 차이를 체감해보자.

방법 ① max-height 트릭 (CSS만)

가장 널리 쓰이는 우회법이다. height 대신 max-height를 쓴다.

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.btn[aria-expanded="true"] + .panel {
  max-height: 300px;  /* 내용보다 넉넉하게 */
}

장점: JS 없이 CSS만으로 된다.

단점: 300px이라는 숫자를 사람이 정해야 한다. 내용이 실제로 120px이면, 펼칠 때 나머지 180px만큼 빈 시간이 생겨서 애니메이션이 미묘하게 늦게 끝나는 느낌이 든다. 반대로 내용이 300px을 넘으면 잘려버린다.

방법 ② details / summary (네이티브)

HTML이 원래 제공하는 태그다.


  제목
  내용

장점: 마크업 몇 줄이면 끝. 키보드·스크린리더 지원이 기본으로 딸려온다. 접근성 측면에서 가장 안전하다.

단점: 열고 닫는 애니메이션이 없다. 그냥 툭 나타났다 툭 사라진다. 부드럽게 만들려면 결국 JS나 추가 트릭이 필요하다.

방법 ③ scrollHeight 측정 (JS)

실제 내용의 높이를 JS로 재서 그 값을 넣어주는 방식이다.

const panel = document.querySelector('.panel');

// 열 때: 실제 높이를 재서 넣기
panel.style.height = panel.scrollHeight + 'px';

// 닫을 때
panel.style.height = '0';

scrollHeight는 요소의 실제 콘텐츠 높이다. 이걸 픽셀 값으로 지정하면 애니메이션이 정확히 동작한다.

장점: 내용 길이에 상관없이 항상 정확하다.

단점: JS가 필요하고, 창 크기가 바뀌면 다시 재야 한다.

완성 코드

세 방식을 한 페이지에 다 넣었다.

HTML


  아코디언 갤러리

  
  
    ① max-height 트릭 CSS only
    
      
        
        
          주문 후 영업일 기준 2~3일 소요됩니다. 도서산간 지역은 하루 더 걸릴 수 있어요.
        
      
      
        
        
          수령 후 7일 이내 가능합니다. 단순 변심의 경우 왕복 배송비가 부과됩니다.
        
      
    
  

  
  
    ② details / summary native
    
      
        회원가입 없이 주문할 수 있나요?
        비회원 주문도 가능합니다. 다만 주문 조회 시 주문번호와 연락처가 필요해요.
      
      
        영수증 발급은 어떻게 하나요?
        마이페이지 > 주문내역에서 현금영수증 및 세금계산서를 발급받을 수 있습니다.
      
    
  

  
  
    ③ scrollHeight 측정 JS
    
      
        
        
          구매 확정 후 자동 적립됩니다. 적립된 포인트는 다음 주문부터 사용할 수 있어요.
        
      
      
        
        
          
            이 항목은 일부러 내용을 길게 넣었습니다. max-height 방식이었다면 미리 정해둔 값에 따라
            잘리거나 애니메이션이 어색해졌을 겁니다. scrollHeight로 실제 높이를 재면 내용이 아무리
            길어져도 정확한 지점까지만 펼쳐집니다. 길이에 신경 쓸 필요가 없다는 게 이 방식의 장점입니다.

CSS

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: #fff3ed;
  font-family: system-ui, sans-serif;
  padding: 40px 20px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.demo-title {
  font-size: 14px;
  font-weight: 700;
  color: #4a3f6b;
  margin: 0 0 10px;
}
.demo-title em {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #8a7fb0;
  margin-left: 6px;
}

.ac {
  background: #fff;
  border: 1px solid #e5ddf0;
  border-radius: 12px;
  overflow: hidden;
}

.ac-item + .ac-item { border-top: 1px solid #e5ddf0; }

.ac-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  color: #2d2540;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: inherit;
}
.ac-btn:hover { background: #faf7ff; }
.ac-btn:focus-visible {
  outline: 3px solid #2d3436;
  outline-offset: -3px;
}

.ac-icon {
  font-size: 12px;
  color: #8a7fb0;
  transition: transform .3s ease;
  flex-shrink: 0;
}
.ac-btn[aria-expanded="true"] .ac-icon { transform: rotate(180deg); }

.ac-inner {
  padding: 0 16px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #5c5470;
}

/* ── ① max-height 방식 ── */
.ac-mh .ac-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.ac-mh .ac-btn[aria-expanded="true"] + .ac-panel {
  max-height: 300px;   /* 내용보다 넉넉하게 잡아야 함 */
}

/* ── ② details/summary ── */
.ac-det details { border-bottom: 1px solid #e5ddf0; }
.ac-det details:last-child { border-bottom: none; }
.ac-det summary {
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  color: #2d2540;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ac-det summary::-webkit-details-marker { display: none; }
.ac-det summary:hover { background: #faf7ff; }
.ac-det summary::after {
  content: "▾";
  font-size: 12px;
  color: #8a7fb0;
  transition: transform .3s;
}
.ac-det details[open] summary::after { transform: rotate(180deg); }
.ac-det .det-body {
  padding: 0 16px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #5c5470;
}

/* ── ③ JS 방식 ── */
.ac-js .ac-panel {
  height: 0;
  overflow: hidden;
  transition: height .3s ease;
}

/* 모션 최소화 배려 */
@media (prefers-reduced-motion: reduce) {
  .ac-panel, .ac-icon, .ac-det summary::after { transition: none !important; }
}

JS

/* ── ① max-height 방식: 클래스 토글만 ── */
document.querySelectorAll('.ac-mh .ac-btn').forEach((btn) => {
  btn.addEventListener('click', () => {
    const isOpen = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!isOpen));
  });
});

/* ── ③ scrollHeight 방식: 실제 높이를 재서 지정 ── */
document.querySelectorAll('.js-btn').forEach((btn) => {
  const panel = btn.nextElementSibling;

  btn.addEventListener('click', () => {
    const isOpen = btn.getAttribute('aria-expanded') === 'true';

    if (isOpen) {
      // 닫기
      panel.style.height = '0';
      btn.setAttribute('aria-expanded', 'false');
    } else {
      // 열기 — 실제 콘텐츠 높이를 측정해서 지정
      panel.style.height = panel.scrollHeight + 'px';
      btn.setAttribute('aria-expanded', 'true');
    }
  });
});

세 방식 비교

	max-height	details/summary	scrollHeight (JS)
JS 필요	토글용 최소한	불필요	필요
애니메이션	있음 (부정확)	없음	있음 (정확)
접근성	직접 챙겨야 함	기본 제공	직접 챙겨야 함
내용 길이 대응	미리 값 지정 필요	자유	자유
추천 상황	내용 길이가 일정할 때	애니메이션이 필요 없을 때	정확한 애니메이션이 필요할 때

접근성 포인트

아코디언은 접근성 요구사항이 명확한 컴포넌트다.

aria-expanded 버튼이 지금 펼쳐진 상태인지 접힌 상태인지 알려준다. 스크린리더가 "확장됨" / "축소됨"이라고 읽어준다. 이게 없으면 시각장애 사용자는 클릭했을 때 뭔가 열렸는지조차 알 수 없다.

aria-controls 이 버튼이 어떤 영역을 제어하는지 연결한다. 패널의 id와 짝을 맞춘다.

[퍼블 복기 시리즈] 토글 사세요... 토글 팔아요.

Thu, 16 Jul 2026 15:25:29 GMT

다양한 토글이 필요한 당신

코드펜 작업물

토글스위치 냠냠 하세요,,, 한 입 하세요,,

버튼 다음으로 어디서든 쓰이는 토글 모음집을 만들어보았다. 하하.

!codepen[editor/na-hyeong9/embed/019f6b85-9b25-7e63-afcc-fa7b8f8fa61f?default-tab=html%2Cresult]

Day 2 · 토글 스위치 갤러리 (6종)

체크박스를 CSS로 변신시켜 만드는 토글 스위치. JS 없이 :checked만으로 동작한다. 접근성: 실제 를 숨겨서 쓰기 때문에 키보드·스크린리더 기본 지원.

핵심 원리

토글 스위치의 비밀은 진짜 체크박스를 숨기고, 그 뒤 요소를 꾸미는 것이다.

[숨긴 체크박스] + [보이는 스위치 모양]
        ↓ 체크되면
input:checked + .switch { 스타일 변경 }

input을 화면에서 안 보이게 하되 삭제하진 않는다. 그래야 클릭·키보드·스크린리더가 정상 작동한다. 옆의 + .switch(인접 형제 선택자)로 체크 상태에 따라 모양을 바꾼다.

HTML


  토글 스위치 갤러리

  
    
      
        
        
        기본 스위치
      
      기본
    
    
      
        
        
        iOS 스타일 스위치
      
      iOS 스타일
    
    
      
        
        
          🌙
          ☀️
        
        다크모드 스위치
      
      아이콘
    
    
      
        
        
        네모 스위치
      
      네모
    
    
      
        
        
          ON
          OFF
        
        ON/OFF 스위치
      
      텍스트
    
    
      
        
        
        통통 튀는 스위치
      
      통통 튐

CSS

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff3ed;
  font-family: system-ui, sans-serif;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.wrap { max-width: 560px; padding: 32px; }

.tg-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 18px;
}

@media (max-width: 480px) {
  .tg-list { grid-template-columns: repeat(2, 1fr); }
}

.tg-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tg-list label {
  cursor: pointer;
  display: inline-flex;
}

/* 진짜 체크박스는 숨김 (삭제 아님!) */
.tg-list input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.label {
  font-size: 13px;
  font-weight: 600;
  color: #4a3f6b;
}

/* 키보드 포커스 시 스위치에 표시 */
.tg-list input:focus-visible + .sw {
  outline: 3px solid #2d3436;
  outline-offset: 3px;
}

/* ── ① 기본 ── */
.sw1 { display:inline-block; width:52px; height:28px; background:#ccc; border-radius:20px; position:relative; transition:background .3s; }
.sw1::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; background:#fff; border-radius:50%; transition:transform .3s; }
input:checked + .sw1 { background:#6c5ce7; }
input:checked + .sw1::after { transform:translateX(24px); }

/* ── ② iOS 스타일 (그림자 손잡이) ── */
.sw2 { display:inline-block; width:52px; height:30px; background:#e0e0e0; border-radius:20px; position:relative; transition:background .3s; }
.sw2::after { content:""; position:absolute; top:2px; left:2px; width:26px; height:26px; background:#fff; border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,.2); transition:transform .3s; }
input:checked + .sw2 { background:#00b894; }
input:checked + .sw2::after { transform:translateX(22px); }

/* ── ③ 아이콘 (해/달) ── */
.sw3 { display:inline-flex; align-items:center; justify-content:space-between; width:60px; height:28px; background:#374151; border-radius:20px; position:relative; padding:0 6px; font-size:12px; transition:background .3s; }
.sw3 .ico-sun, .sw3 .ico-moon { z-index:1; }
.sw3::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; background:#fff; border-radius:50%; transition:transform .3s; }
input:checked + .sw3 { background:#f0b429; }
input:checked + .sw3::after { transform:translateX(32px); }

/* ── ④ 네모 ── */
.sw4 { display:inline-block; width:52px; height:28px; background:#ccc; border-radius:6px; position:relative; transition:background .3s; }
.sw4::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; background:#fff; border-radius:4px; transition:transform .3s; }
input:checked + .sw4 { background:#d63384; }
input:checked + .sw4::after { transform:translateX(24px); }

/* ── ⑤ 텍스트 (ON/OFF) ── */
.sw5 { display:inline-flex; align-items:center; width:64px; height:28px; background:#e17055; border-radius:20px; position:relative; transition:background .3s; }
.sw5 .txt { position:absolute; font-size:10px; font-weight:700; color:#fff; transition:opacity .3s; }
.sw5 .on { left:9px; opacity:0; }
.sw5 .off { right:9px; opacity:1; }
.sw5::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; background:#fff; border-radius:50%; transition:transform .3s; z-index:1; }
input:checked + .sw5 { background:#00b894; }
input:checked + .sw5::after { transform:translateX(36px); }
input:checked + .sw5 .on { opacity:1; }
input:checked + .sw5 .off { opacity:0; }

/* ── ⑥ 통통 튐 (bouncy) ── */
.sw6 { display:inline-block; width:64px; height:34px; background:#d1d5db; border-radius:20px; position:relative; transition:background .3s; }
.sw6::after { content:""; position:absolute; top:3px; left:3px; width:28px; height:28px; background:#fff; border-radius:50%; box-shadow:0 2px 5px rgba(0,0,0,.25); transition:transform .35s cubic-bezier(.68,-0.55,.27,1.55); }
input:checked + .sw6 { background:#0984e3; }
input:checked + .sw6::after { transform:translateX(30px); }

/* 모션 최소화 배려 */
@media (prefers-reduced-motion: reduce) {
  .sw, .sw::after { transition: none !important; }
}

JS

없다. :checked 상태만으로 전부 CSS로 처리된다. 이게 이 챌린지의 핵심이다.

각 스위치 핵심 정리

#	이름	핵심 기술
1	기본	`::after` 손잡이 + `translateX`
2	iOS 스타일	손잡이에 `box-shadow`
3	아이콘	해/달 이모지 배치 + 손잡이 이동
4	네모	`border-radius` 작게
5	텍스트	ON/OFF 텍스트 `opacity` 전환
6	통통 튐	`cubic-bezier`로 튀는 이징

실험 포인트

손잡이 이동 거리: translateX 값은 (스위치 너비 − 손잡이 너비 − 여백×2)로 계산. 너비를 바꾸면 이 값도 맞춰야 한다
이징: ⑥번의 cubic-bezier(.68,-0.55,.27,1.55)가 통통 튀는 비결. ①번에도 넣어보면 느낌이 확 다르다
색 전환 타이밍: 배경색과 손잡이 이동의 transition 시간을 다르게 주면 미묘하게 달라진다

왜 체크박스를 안 지우고 숨기나

display: none으로 체크박스를 완전히 없애면 안 된다. 그러면 키보드로 포커스가 안 가고, 스크린리더도 인식 못 한다. 그래서 opacity: 0 + width/height: 0으로 시각적으로만 숨긴다. 기능은 그대로 살아있는 상태다.

:focus-visible 스타일을 손잡이(.sw)에 준 것도 같은 이유다. 키보드 사용자가 지금 어느 스위치에 있는지 보여줘야 한다.

기록용 한 줄

뭘 만들었나: CSS만으로 동작하는 토글 스위치 6종
어디서 막혔나: 손잡이가 스위치 밖으로 삐져나감 → translateX 거리를 너비에 맞게 다시 계산
뭘 알게 됐나: 체크박스는 숨기되 삭제하면 안 된다 — opacity:0으로 기능을 살려야 접근성이 유지된다

[퍼블 복기 시리즈]다양한 버튼을 보러오세요.

Wed, 15 Jul 2026 13:51:01 GMT

다양한 버튼이 필요한 당신

나는 이제 퍼블리셔가 사용할 수 있는 모든 컴포넌트를 제작하기로 마음 먹었다. 진짜다. 진짜... 할거다~ 이것은 버튼 시리즈다.

일단 처음 작업은 가장 친숙한 HTML과 CSS, JS로 시작하겠다.

코드펜 작업물

!codepen[editor/na-hyeong9/embed/019f65a8-af96-7981-b9c9-1bf7b94c1457?default-tab=html%2Cresult]

Day 1 · 호버 버튼 갤러리 (12종)

CodePen용 코드. 버튼 목록이라
+
로 구성하고, 4열로 정렬했다. 접근성 요소(포커스 표시, 색 비의존 라벨, 모션 최소화) 포함.

HTML


  호버 버튼 효과 갤러리

  
    
      
      색 + 확대 fill scale
    
    
      
      색 반전 outline
    
    
      
      떠오름 lift
    
    
      
      슬라이드 채움 slide
    
    
      
      물결 ripple
    
    
      
      글로우 glow
    
    
      
      그라데이션 gradient
    
    
      
      자간 확장 spacing
    
    
      
      눌림 press
    
    
      
      모서리 변형 radius
    
    
      
      아이콘 이동 icon shift
    
    
      
      자석 magnetic

CSS

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff3ed;
  font-family: system-ui, sans-serif;
}

/* 스크린리더 전용 텍스트 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.wrap { max-width: 720px; padding: 32px; }

.btn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4열 고정 */
  gap: 28px 18px;
}

/* 모바일: 2열 */
@media (max-width: 600px) {
  .btn-list { grid-template-columns: repeat(2, 1fr); }
}

.btn-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.label {
  font-size: 13px;
  font-weight: 600;
  color: #4a3f6b;
  text-align: center;
  line-height: 1.4;
}

.label em {
  display: block;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  color: #8a7fb0;
}

.btn {
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-family: inherit;
}

.btn:focus-visible {
  outline: 3px solid #2d3436;
  outline-offset: 3px;
}

/* ① 색 + 확대 */
.b1 { background: #6c5ce7; color: #fff; transition: all .25s ease; }
.b1:hover { background: #4834b4; transform: scale(1.06); }

/* ② 색 반전 */
.b2 { background: #fff; color: #4834b4; border: 2px solid #4834b4; transition: all .25s ease; }
.b2:hover { background: #4834b4; color: #fff; }

/* ③ 떠오름 */
.b3 { background: #fff; color: #333; box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: all .25s ease; }
.b3:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,.18); }

/* ④ 슬라이드 채움 */
.b4 { background: #008068; color: #fff; transition: all .3s ease; }
.b4::before { content: ""; position: absolute; inset: 0; background: #005c4a; transform: translateX(-100%); transition: transform .3s ease; z-index: 0; }
.b4:hover::before { transform: translateX(0); }
.b4 .txt { position: relative; z-index: 1; }

/* ⑤ 물결 */
.b5 { background: #c0492a; color: #fff; transition: color .3s; }
.b5::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; background: #8a2f19; border-radius: 50%; transform: translate(-50%,-50%); transition: width .4s ease, height .4s ease; z-index: 0; }
.b5:hover::before { width: 250%; height: 250%; }
.b5 .txt { position: relative; z-index: 1; }

/* ⑥ 글로우 */
.b6 { background: #0069b3; color: #fff; transition: box-shadow .3s ease; }
.b6:hover { box-shadow: 0 0 18px 2px #4da3e0; }

/* ⑦ 그라데이션 흐름 */
.b7 { color: #fff; background: linear-gradient(90deg, #6c5ce7, #d6467f, #6c5ce7); background-size: 200% 100%; background-position: 0 0; transition: background-position .5s ease; }
.b7:hover { background-position: 100% 0; }

/* ⑧ 자간 확장 */
.b8 { background: #2d3436; color: #fff; transition: letter-spacing .25s ease, background .25s; }
.b8:hover { letter-spacing: 3px; background: #6c5ce7; }

/* ⑨ 눌림 */
.b9 { background: #008068; color: #fff; transition: transform .2s; }
.b9:hover { transform: translateY(-2px); }
.b9:active { transform: scale(.92); }

/* ⑩ 모서리 변형 */
.b10 { background: #fff; color: #b02a6b; border: 2px solid #b02a6b; border-radius: 30px; transition: all .3s ease; }
.b10:hover { border-radius: 10px; background: #b02a6b; color: #fff; }

/* ⑪ 아이콘 이동 */
.b11 { background: #9a6a08; color: #fff; }
.b11 .arrow { display: inline-block; transition: transform .3s ease; }
.b11:hover .arrow { transform: translateX(5px); }

/* ⑫ 자석 */
.b12 { background: #555e62; color: #fff; transition: transform .15s ease; }

/* 모션 최소화 배려 */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .b11 .arrow { transition: none !important; }
}

JS (자석 버튼)

const magnetic = document.getElementById("magnetic");

magnetic.addEventListener("mousemove", (e) => {
  const rect = magnetic.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;
  magnetic.style.transform = `translate(${x * 0.4}px, ${y * 0.4}px)`;
});

magnetic.addEventListener("mouseleave", () => {
  magnetic.style.transform = "translate(0, 0)";
});

각 버튼 핵심 정리

#	이름	핵심 기술
1	색 + 확대	`transition` + `transform: scale()`
2	색 반전	`:hover`로 배경/글자색 교체
3	떠오름	`translateY` + `box-shadow`
4	슬라이드 채움	`::before` + `translateX`
5	물결	`::before` 원형 확대
6	글로우	`box-shadow` 번짐
7	그라데이션 흐름	`background-position` 이동
8	자간 확장	`letter-spacing` 전환
9	눌림	`:active` + `scale`
10	모서리 변형	`border-radius` 전환
11	아이콘 이동	자식만 `translateX`
12	자석	JS로 마우스 위치 추적

실험 포인트

transition 시간: .25s → .6s로 느린 느낌 체감
easing: ease → cubic-bezier(.68,-0.55,.27,1.55) 넣으면 통통 튀는 느낌
자석 강도: JS의 0.4를 0.8로 올리면 더 강하게 끌려옴
::before 트릭: ④⑤번은 가짜 요소를 깔고 overflow: hidden으로 잘라내는 패턴 — 응용 범위가 넓다

기록용 한 줄

뭘 만들었나: 호버 버튼 12종 갤러리 (ul/li, 4열)
어디서 막혔나: ::before가 글자를 덮어서 안 보임 → .txt에 position: relative; z-index: 1로 해결
뭘 알게 됐나: overflow: hidden + ::before 조합이 슬라이드·물결 효과의 핵심

퍼블리셔가 프론트엔드가 될 수 있을까

Wed, 15 Jul 2026 13:36:14 GMT

나는 퍼블리셔다.

맞다. 나는 2년 7개월치 퍼블리셔다. 회사가 망해버려 만 7개월째 백수가 되어버린 개백수다.

6년 전 회사를 퇴사하고 나서 내가 무얼 좋아하는지 고민 끝에 개발에 뛰어들었다. 바로 학원을 등록해서 풀스택 과정을 들었다. 파이썬과 mongo DB를 이용한 과정이었다. 내가 처음부터 끝까지 하나의 웹사이트를 만드는 것이 신나는 일이었다.

그런데 왠 퍼블리셔로 직무를 전환했을까.

이건.... 그냥 꼬여버렸다. 인생은 선택의 연속이다. 그리고 난 내 선택에 책임을 져야했다. 처음엔 파이썬으로 백엔드 지원을 했다. 정부에서 자바를 많이 쓴다는 걸 그제서야 알았다. 공고의 수가 현저히 적었다. 공고의 수가 적다고 해서 물러날 순 없었다. 이력서 난사가 시작되었다. 그 당시 신입의 개기로 본 면접은 1시간의 회사 설명을 듣다가 끝나기도 했고, 바로 할 수 있냐는 몇몇 질문을 받았다.

난 쓸 데 없이 솔직하게 바로 하기엔 실력이 부족하다고 대답했다. 그리고 회사에서 사용한다면 개인적으로 학습을 해서라도 실무에 차질 없도록 노력하겠다고. 노오력. 노력~!!! 하겠다고 했다.

뭔 면접만 가면 노력하겠다는 소리가 나온다.

면접 제 1 법칙(2 법칙은 모른다.) 노력이라는 열정보단 내가 실무에서 실질적으로 어떻게 할 수 있을지 알아야되는 걸 자리만 가면 제가 잘 해보겠습니다 대감님. 이런 자세가 나온다.

그런데 내가 실제로 일하는 방식이 그렇다 노력하고 결과까지 이어진다. 그렇기에 한 대답이 면접에선 씨알도 먹히지 않았다. 왜 이제 노력하고 느려도 결과내는 사람은 먹히지 않는 걸까. 난 7-80년대 사람인가보다.. 그래서 빠른 속도를 내기 위해 부단히 노력중이다. 태생이 빠른 사람을 이길 수 없겠지만서도 이것마저 노력해야했다.

나는 파이썬의 광탈에 못이겨 퍼블리셔 공고를 하나 넣어버린다. 그냥 넣어 버린 회사에서 연락이 왔다. 나는 연습이라도 하자는 생각으로 면접을 잡았다.

면접은 이렇다할 분별력 없이 진행됐다. 그 당시만 해도 중소기업 중에 그런 곳이 많았다. 심지어 나는 포트폴리오도 개발자 포트폴리오를 제출한 상태였다.

질문은 이러했다. (자세히 기억이 나지 않지만 대략적으로 적어보겠다.)

Q1. 퍼블리셔 지원 맞아요? > 맞긴했다. 보고하긴 했다. Q2. 지원한 이유가 뭔가요? > 저는 보이는 화면을 그리는 작업이 재밌습니다. html과 css 작업에 손이 빠릅니다. (비교할 대상도 없으면서 뻔뻔했음.) Q3. 파견 괜찮으신가요? > 네. (파견만 나가는 회산지 몰랐음.)

그 외 인성 질문 등등

회사를 나오자마자 합격 문자가 왔다. 솔직히 기뻤다. 오랜만에 보는 면접 합격 문자였다. 나는 면접에서 많이 떠는 편이어서 실력을 발휘하기 어려웠다.

이틀 뒤? 인가 입사 가능하냐고 물었을 때 (다른 면접을 보기 위해) 2주 정도 미룰 수 있냐고 물었다.

애매한 답변에 서둘러 오케이를 해버렸다. 돈이 필요하니까 다니면서 생각하자는 마음이 들었다. 연봉을 맞춰준 게 컸다.

첫 프로젝트와 나

내가 면접중 한 질문은 하나였다. 사수유무에 대한 여부였다. 전 회사에서 사수없이 일을 치른 적이 있었다. 정말 악몽이었다. 물어볼 사람도 없이 해결을 해야한다는 게 여간 어려운 게 아니었다. 그래서 다음 회사에서 원하는 게 있다면 사수, 그리고 직원들의 근속년수였다.

사수가 있긴 했다. 근데 없다. 왜냐하면 파견 특성상 혼자 나가는 경우가 있었고, 나는 첫 프로젝트를 제외하고 한 번도 사수와 같이 했던 적이 없다. 나는 나에 대한 평가를 듣는 걸 좋아했다. 내가 어느 정도 수준인지 객관적으로 알고 싶은데 내 스스로는 판단이 어려웠다.

첫 프로젝트에서 왜 이렇게 해요? 라는 소리에 뭐라 말하기가 어려웠다. 그냥 짜다보니... 구조를 이렇게 하는 게 좋지 않을까요?.. 라는 대답을 자신 없게 했다. div가 너무 많다는 거 였다. 그래서 나는 그 작업을 할 때 최대한 div를 쓰지 않으려고 노력했다. 거기서 오는 오류는 그거 신경쓰느라 작업이 늦었다.

대체 어느정도가 많이 쓰는 거고 어느 정도가 적당한 건지 분간이 되지 않았다.

그 이후로는 크게 container/wrap로 layout을 잡고 자잘한 컴포넌트 위주로 짰다. 칭찬을 듣지는 못했지만 적어도 그 전보다 나아진 것 같았다. (너무 예전이라 상세한 기억이 나지 않는다.)

실무에 투입되자 여차저차 굴러갔다. 퍼블리싱이라는 게 쉽다고는 생각 하지 않았지만 금세 적응할 수 있었다. 나는 그 중에 자바스크립트에 관심이 많았다.

자바스크립트 너 쉽지 않다.

나는 기본기가 부족했다. 프로젝트 들어가지 여실히 느꼈다. 그리고 SI 프로젝트는 특성상 외부 서버가 열리지 않는다. 이클립스 IDE를 사용하고 기존 소스에 추가하는 작업이 시작되자 미칠듯이 스트레스 받았다.

같이 개발하는 백엔드 한 분과 퍼블리셔 나만 투입된 숏츠 기능 추가 프로젝트였다. 개발기간은 짧았다 2달이내로 진행됐다.

기획/디자인/퍼블리싱을 동시에 들어갔다. 난 회사가 시키면 일단 한다는 주의다. 불만이 일어도 해보고 문제점을 찾는다. 근거가 있어야 설득이 된다고 생각하기 때문이다. 그게 주니어의 자세라고 생각하기 때문이다.

기획과 디자인은 유튜브를 벤치마킹했다. 단 시간에 진행해야하는 만큼 고객사에서 편의를 많이 봐주셨다. 그래서 예상보다 수월했는데...

자바스크립트 쌰갈! 진짜 쌰갈이었다.

모르겠어서 눈물이 앞을 가렸다. video.js를 처음 다뤄봤다. 자바스크립트니까 이번을 기회를 발판으로 자바스크립트 공부를 열심히 해보자는 마음에 악귀가 꼈다.

기능 1. 영상이 60퍼 이상 차지하면 자동재생/ 영상이 40퍼 이하면 일시정지와 음소거 기능 2. 볼륨 제어기

그 외 작업

댓글창 열리는 동시에 영상 밀리는 인터랙션
버튼 인터랙션
로고, 아이콘 작업 (다수) 등등...

저 영상이랑 볼륨 제어기가 반응형으로 들어가서 문제를 계속 일으켰다.

내일 이어서 쓰겠다....

[JS] 모던 자바스크립트부터 다시 시작 - 8 - 모듈 시스템

Thu, 09 Jul 2026 14:22:49 GMT

지난 편에서 프로토타입을 다뤘다. 이번엔 코드를 여러 파일로 나눠 쓰는 방법 — 모듈 시스템이다. import/export를 매일 쓰면서도 정확히 뭘 하는 건지 넘어갔던 개념을 정리해본다.

모듈이 왜 필요한가

처음 자바스크립트를 배울 때는 파일 하나에 코드를 다 넣는다. 근데 프로젝트가 커지면 문제가 생긴다.

예전에는 이렇게