웹개발

챗봇의 두뇌가 준비됐으니 이제 몸을 만들 차례다. 아무리 응답이 좋아도 UI가 구리면 아무도 안 쓴다. 실제로 처음에 못생긴 프로토타입을 올렸다가 클릭률이 2% 미만이었다. 디자인을 갈아엎고 나서야 10%를 넘겼다. 목표는 간단했다. 카카오톡이나 네이버 톡톡 수준의 채팅 UI를 단일 PHP 파일 안에 구현하는 것. 외부 라이브러리 없이, CSS와 바닐라 JS만으로. 플로팅 채팅 버튼 — 첫인상이 전부 화면 … 더 읽기

사이트에 서비스 페이지가 50개를 넘어가면서 문제가 생겼다. 방문자가 원하는 걸 못 찾는다. 사이트맵 페이지를 만들어놨지만 누가 그걸 보겠나. 검색 기능도 있지만 “사주 보고 싶은데” 같은 자연어는 처리하지 못한다. 결국 이탈률만 높아진다. 챗봇을 달면 해결될 것 같았다. 근데 외부 서비스를 쓰자니 월 2~3만원은 기본이고, ChatGPT API를 바로 붙이면 트래픽 늘 때 비용 폭탄을 맞는다. 그래서 직접 … 더 읽기

4편까지 백엔드(API, 지표 계산, 스크리닝)와 차트를 만들었다. 마지막 편에서는 이 모든 것을 하나로 엮는 프론트엔드를 완성한다. 워드프레스 AJAX 구조, nonce 보안, 탭 전환, 검색 UX, localStorage 캐싱, 반응형 디자인, 다크모드까지 — 사용자가 실제로 만지는 부분 전부다. WordPress AJAX의 작동 원리 워드프레스에서 AJAX를 쓰려면 정해진 규칙이 있다. 모든 AJAX 요청은 admin-ajax.php로 보내고, action 파라미터로 어떤 핸들러를 … 더 읽기

처음에는 TradingView 임베드 위젯을 쓰려고 했다. 코드 한 줄이면 프로급 차트가 나오니까. 문제는 한국 종목을 TradingView 위젯에 넣으면 TradingView 사이트로 이동하는 팝업이 자꾸 뜬다는 거다. 무료 위젯은 브랜딩 제거가 안 되고, 클릭하면 자기 사이트로 데려간다. 내 대시보드에서 사용자를 빼앗기는 셈이다. 대안으로 찾은 게 TradingView에서 오픈소스로 공개한 Lightweight Charts다. 이름 그대로 가볍고(gzip 기준 40KB), Apache 2.0 … 더 읽기

하루에 코스피+코스닥 합쳐서 2,500개가 넘는 종목이 거래된다. 일일이 확인할 수 없으니 “오늘 주목할 만한 종목”을 자동으로 걸러주는 시스템이 필요하다. 증권사에서는 이걸 종목 스크리너라고 부른다. 거래량 상위, 상승률 상위 같은 단순 필터링부터, 캔들 패턴을 분석해 점수를 매기는 복잡한 것까지 있다. 우리 대시보드에서는 두 가지를 구현했다: (1) 개별 종목에 0~100점 기술적 점수를 매기는 스코어링 알고리즘, (2) 박스권에서 … 더 읽기

주식 차트 아래에 달리는 보조 지표 — 이동평균선, RSI, 볼린저 밴드. 증권사 앱에서는 버튼 하나로 켜지지만, 직접 만들려면 원시 데이터에서 계산해야 한다. 놀랍게도 수학은 중학교 수준이고, PHP 코드는 함수 하나에 10줄 남짓이다. 이번 편에서는 1편에서 받아온 60거래일 데이터로 기술적 지표를 계산하는 전체 과정을 풀어놓는다. 기술적 분석이 뭔가 — 30초 요약 주식의 미래 가격을 예측하는 방법은 … 더 읽기

개인 블로그에서 수익을 내려면 “다시 와야 할 이유”가 있어야 한다. 글만 잔뜩 쌓아놓으면 한 번 읽고 떠나는 방문자가 대부분이다. 반면 도구형 콘텐츠 — 예를 들면 환율 계산기, 세금 시뮬레이터, 주식 분석 대시보드 같은 것들 — 은 사용자가 반복적으로 방문한다. 방문 횟수가 곧 광고 노출이고, 노출이 곧 수익이다. 그래서 나는 워드프레스 mu-plugin으로 주식 기술적 분석 대시보드를 … 더 읽기

개인 프로젝트나 포트폴리오를 무료로 배포할 수 있는 호스팅 서비스를 비교합니다. 정적 사이트부터 Next.js까지 커버합니다. 3개 서비스 한눈에 비교표 GitHub Pages: 설정 방법과 장단점 Vercel: Next.js 최적 배포 Netlify: 폼, 함수 등 추가 기능 마무리 이 글이 도움이 되셨다면 댓글과 공유 부탁드립니다. 관련 글도 함께 읽어보시면 더 많은 정보를 얻으실 수 있습니다.

TypeScript는 JavaScript에 타입 시스템을 추가한 언어로, 대규모 프로젝트에서 버그를 크게 줄여줍니다. 왜 인기인지, 어떻게 시작하는지 알아봅니다. TypeScript가 인기 있는 이유 (수치로 보기) 기본 타입 종류와 문법 TypeScript vs JavaScript 비교 실습: 첫 TypeScript 프로젝트 세팅 마무리 이 글이 도움이 되셨다면 댓글과 공유 부탁드립니다. 관련 글도 함께 읽어보시면 더 많은 정보를 얻으실 수 있습니다.

React는 전 세계 프론트엔드 개발자의 약 40%가 사용하는 가장 인기 있는 JavaScript 라이브러리입니다(Stack Overflow 2025). 페이스북, 인스타그램, 넷플릭스, 에어비앤비 등이 React로 만들어졌습니다. 이 글에서 React가 왜 인기 있는지, 무엇이 다른지, 어떻게 시작하는지를 정리합니다. React란? React는 사용자 인터페이스(UI)를 만드는 JavaScript 라이브러리입니다. Facebook(현 Meta)에서 개발했고, 2013년 오픈소스로 공개되었습니다. 기존 방식과의 차이를 비유하면: 기존 방식 (jQuery 등) React … 더 읽기