HTML/CSS

2018년 겨울, 대기업 클라이언트에게 연말 성과 보고용 웹 대시보드를 만들어 납품했던 날이 생생합니다. 클라이언트가 “이거 그대로 출력하게 PDF로 좀 뽑아주세요”라고 무심코 던진 요청에, 저는 당연히 ‘Ctrl+P(인쇄)’를 눌렀죠. 하지만 결과물은 처참했습니다. 화려했던 CSS 스타일은 다 사라지고 텍스트만 앙상하게 남은, 말 그대로 ‘깨진 문서’가 나왔으니까요. 식은땀을 흘리며 밤새 변환 툴을 찾아 헤매던 기억이 납니다. 아마 지금 이 […]

지난달, 한 클라이언트의 웹사이트 속도가 너무 느리다는 상담을 받았습니다. 이미지를 다 압축했는데도 모바일 점수가 50점대였죠. 원인을 파헤쳐 보니 범인은 ‘무거운 폰트 파일’이었습니다. 3MB가 넘는 폰트 파일을 통째로 내려받느라 브라우저가 흰 화면(White Screen)을 띄우고 멈춰 있었던 겁니다. 한국 웹의 새로운 표준이 된 ‘프리텐다드(Pretendard)’. 가독성 좋고 깔끔하지만, 최적화 없이 그냥 쓰면 ‘데이터 덩어리’일 뿐입니다. 오늘 이 글을

혹시 웹사이트를 디자인하다가 “겨우 장식 아이콘 하나 넣자고 텅 빈 <div> 태그를 또 만들어야 하나?”라는 자괴감에 빠진 적 없으신가요? 코드는 지저분해지고, 유지보수는 어려워지는 그 답답함, 저도 너무 잘 압니다. HTML 구조를 깔끔하게 유지하면서도 전문가 수준의 디테일을 챙기는 방법이 있습니다. 바로 CSS의 ‘투명 망토’라 불리는 가상 요소(Pseudo-elements)를 활용하는 것이죠. 이 글을 끝까지 읽으시면, 여러분의 웹페이지는 HTML

신입 퍼블리셔 시절, 게시판 목록을 만들 때마다 가장 골치 아팠던 건 ‘제각각인 이미지 사이즈’였습니다. 어떤 건 길쭉하고, 어떤 건 납작했죠. 이걸 width: 100%; height: 200px;로 강제 고정해버리면 여지없이 사진이 홀쭉해지거나 뚱뚱해졌습니다. “이미지를 보여주는 창문(Frame)만 만들고, 풍경(Image)은 자연스럽게 잘라내면 안 될까?” 이 고민을 해결해 준 것이 바로 object-fit입니다. 이제 <div> 배경으로 이미지를 넣는 꼼수는 그만두세요. 검색엔진이

2015년, 정부 관련 프로젝트를 진행할 때였습니다. 검수 마지막 날, “할머니가 보시기엔 글씨가 너무 작아서 안 보이신다는데, 브라우저 설정을 바꿔도 그대로네요?”라는 피드백을 받았습니다. 등줄기에 땀이 흘렀습니다. 저는 모든 단위를 px로 고정해 놨었거든요. 결국 3천 줄이 넘는 CSS 코드를 전부 뒤엎어야 했습니다. 픽셀은 개발자에겐 편하지만, 사용자(특히 노안이나 저시력자)에겐 불친절한 단위입니다. 이 글을 읽는 여러분은 저와 같은 삽질을

2021년 봄, 핀테크 앱 프로젝트를 맡았을 때입니다. UI 디자이너가 “신뢰감을 주려면 카드가 투명해야 해요!”라며 시안을 가져왔습니다. 저는 습관처럼 opacity: 0.5를 줬죠. 결과는 처참했습니다. 배경은 보였지만, 위에 적힌 계좌번호와 금액까지 희미해져서 도저히 읽을 수가 없었거든요. “아니, 유리는 투명하고 글씨는 진해야죠!” 디자이너의 불만 섞인 목소리에 저는 머리를 싸맸습니다. 배경은 흐리게 뭉개면서(Blur), 텍스트는 선명하게 살리는 것. 이 모순적인

2018년, 한 쇼핑몰 사이트의 리뉴얼 프로젝트를 맡았을 때의 일입니다. 상품은 좋은데 노출이 너무 안 돼서 폐업 위기였죠. 코드를 뜯어보니 헤더부터 푸터까지 모든 요소가 <div>로만 도배되어 있었습니다. 구글 봇에게는 그저 거대한 ‘의미 없는 덩어리’로 보였을 겁니다. 저는 3일에 걸쳐 <div>를 <header>, <main>, <article>로 바꾸는 ‘이름표 붙이기’ 작업만 했습니다. 결과는 어땠을까요? 2주 뒤 오가닉 트래픽(자연 유입)이 250%

2014년 겨울로 기억합니다. 처음으로 클라이언트에게 반응형 홈페이지를 납품하던 날이었죠. 자신만만하게 링크를 보냈는데, 3분 뒤 전화가 왔습니다. “코드캠 님, 사장님 폰에서 메뉴가 화면 밖으로 튀어나가는데요?” 식은땀이 흘렀습니다. 알고 보니 저는 뷰포트(Viewport) 설정도 없이 픽셀만 맞추고 있었던 겁니다. 반응형 웹이 어렵게 느껴지는 이유는 ‘어디서 화면을 잘라야 할지’ 기준이 없기 때문입니다. 오늘 이 글을 끝까지 읽으시면, 더 이상

코딩을 처음 시작했을 때 가장 힘들었던 게 뭔지 아세요? 복잡한 문법? 아닙니다. 바로 ‘단순 노동’이었습니다. 코드 한 줄 고치고 크롬 창 띄워서 새로고침(F5) 누르고, 다시 에디터로 돌아오고… 이 짓을 하루에 500번쯤 하다 보면 “내가 지금 코딩을 하는 건지 막노동을 하는 건지” 현타가 오곤 했죠. 오늘 소개해 드릴 5가지 확장 프로그램(Extension)은 여러분의 손목 건강과 정신 건강을

여러분의 블로그 모바일 화면, 지금 한번 켜보시겠어요? 우측 상단(혹은 좌측)에 있는 메뉴 버튼이 눈에 확 들어오나요? 아스트라(Astra)는 가볍고 빠른 최고의 테마지만, 무료 버전의 기본 모바일 메뉴 아이콘은 솔직히 말해 너무 ‘소심’합니다. 배경색과 아이콘 색이 비슷해서 보호색을 띠고 있거나, 터치하기에 너무 작은 경우가 많죠. 이 작은 차이가 방문자를 3초 만에 나가게 만듭니다. ▲ (Before & After)