HTML/CSS

동네에서 꽤 규모가 있는 카페를 운영하는 지인에게 다급한 연락이 왔습니다. “코드캠님, 어제 갑자기 배관이 터져서 임시 휴업을 했는데, 웹사이트에 안 적어놨더니 손님들이 헛걸음하고 별점 테러를 남겼어요.” 사장님은 매일 아침 네이버 지도, 인스타그램, 그리고 개인 웹사이트의 영업시간을 일일이 수동으로 고치는 것에 엄청난 피로를 느끼고 계셨습니다. 이런 상황, 비단 이 사장님만의 이야기는 아닐 겁니다. 오늘 이 글을 […]

2020년, 코로나로 모두가 힘들어하던 시기에 작은 온라인 주점을 운영하던 클라이언트가 찾아왔습니다. “사이트가 너무 어두침침해서 손님들이 오다가도 나가는 것 같아요.” 저는 메인 배너에 적힌 밋밋한 흰색 텍스트를 보고, 실제 을지로 뒷골목의 감성을 웹으로 가져오기로 했습니다. 바로 ‘네온사인’이었죠. 단순히 글자 색만 바꾼 게 아니라, 실제 전기가 흐르는 것처럼 ‘지지직’거리며 빛나는 효과를 적용했습니다. 결과는 어땠을까요? 배너 클릭률이 하룻밤

한 수제 비누 쇼핑몰 대표님이 울상 지으며 찾아오셨습니다. “제품은 진짜 좋은데, 사람들이 상세페이지 끝에 있는 후기까지 안 내려가고 다 나가버려요.” 원인은 간단했습니다. 모바일 화면에서 A4 용지 3장 분량의 텍스트 리뷰를 굳이 스크롤해서 읽어볼 인내심 있는 고객은 없었으니까요. 저는 즉시 길고 지루한 리뷰 목록을 지우고, 상세페이지 상단에 ‘알아서 넘어가는 후기 슬라이드(리뷰 캐러셀)’ 딱 하나를 배치했습니다. 결과는

웹사이트나 쇼핑몰 퍼블리싱을 진행할 때 가장 빈번하게 요구되는 기능 중 하나가 바로 ‘메인 페이지 이벤트 팝업창’입니다. 단순히 화면 중앙에 이미지를 띄우는 것은 CSS의 position: fixed만으로 간단히 해결되지만, 실무에서는 반드시 ‘오늘 하루 안 보기’ 또는 ‘일주일간 보지 않기’와 같은 세밀한 제어가 필요합니다. 사용자가 페이지를 이동할 때마다 동일한 팝업이 계속 노출된다면 심각한 UX(사용자 경험) 저하를 초래하기 때문입니다.

온라인에서 가장 참기 힘든 시간, 바로 ‘로딩 중…’ 화면을 볼 때입니다. 사이트에 들어왔는데 하얀 빈 화면만 3초 이상 지속되면 방문자의 53%는 뒤로 가기를 누릅니다. 이 지루한 기다림의 시간을 우리 브랜드의 ‘쇼타임’으로 바꿀 수 있습니다. 넷플릭스나 유튜브처럼 로고가 빙글빙글 돌아가는 멋진 로딩 화면을 만들어보세요. 방문자는 “아, 뭔가 준비 중이구나” 하고 안심하게 되고, 사이트의 전문성은 올라갑니다. 오늘

이 버튼 하나 달면, 한 달에 CS 알바비 100만 원 아낍니다. 사장님, 오프라인 옷가게를 생각해 보세요.손님이 옷을 들고 “이거 M 사이즈 있나요?” 물어보려고 둘러보는데 점원이 안 보입니다.그럼 손님은 어떻게 할까요? 그냥 옷 내려놓고 나갑니다. 인터넷 쇼핑몰이나 홈페이지도 똑같습니다.궁금한 게 생겼을 때 바로 물어볼 곳이 없으면, 손님은 가차 없이 창을 닫아버립니다. 그래서 대형 쇼핑몰들은 화면을 아무리

맛집이나 여행 포스팅을 하다 보면 사진 10장을 올려야 할 때가 있습니다. 이걸 그냥 세로로 쭉 나열하면 어떻게 될까요? ‘스크롤 지옥’이 펼쳐집니다. 독자는 사진을 보기도 전에 지쳐서 나가버리죠. 인스타그램이 왜 인기 있을까요? 바로 ‘그리드(Grid)’ 때문입니다. 한눈에 들어오는 정사각형 배치가 시각적 편안함을 주거든요. 오늘은 여러분의 블로그나 홈페이지를 인스타 피드처럼 바꿔줄 ‘마법의 코드’를 가져왔습니다. 사진 크기가 들쑥날쑥해도 상관없습니다.

지난주, 동네 치킨집 사장님과 담배 한 대를 태웠습니다. 사장님이 영수증 뭉치를 보여주시더군요. “작가님, 제가 어제 100만 원어치를 팔았거든요? 근데 배달비, 중개 수수료, 광고비 떼니까 통장에 60만 원 들어옵니다. 이게 맞습니까?” 속이 타들어 가는 그 마음, 저도 잘 압니다. 남의 땅(배달앱)에서 장사하면 세금을 낼 수밖에 없습니다. 그래서 제가 그 자리에서 노트북을 펴고 딱 20줄짜리 코드를 짜드렸습니다.

2018년, 제가 처음 웹 개발을 배울 때였습니다. 간단한 포트폴리오 페이지 하나 띄우겠다고 카페24 호스팅을 결제하고, 알드라이브(FTP)로 파일을 올리느라 반나절을 씨름했죠. 파일 하나 수정할 때마다 재업로드… 정말 끔찍했습니다. 그러다 동료 개발자가 지나가듯 말하더군요. “아직도 돈 내고 호스팅 써? 요새 누가 FTP를 써, 네트리파이 쓰지.” 그날 이후 제 통장에서 서버 비용은 사라졌습니다. 네트리파이(Netlify)는 여러분의 HTML 파일을 전

3년 전, 제 지인이 작은 공방을 열면서 홈페이지 제작 업체에 견적을 냈습니다. 돌아온 답변은 “기본형 150만 원, 관리비 월 5만 원”. 내용이라고 해봤자 가게 위치, 메뉴, 인스타그램 링크가 전부인데 말이죠. 제가 그 견적서를 찢어버리고 노트북을 켰습니다. 그리고 딱 30분 만에 똑같은 기능을 하는 사이트를 만들어줬습니다. 비용은? 도메인 구매비 2만 원이 전부였습니다. 사장님, 이제 ‘코딩’ 몰라도