소이의 개발이야기

서론테라스팟 프로젝트 종료 후, 어드민 페이지 작업이 진행되었습니다. 다만, 해당 기간은 공식적인 프로젝트 종료일 이후 추가적인 기획과 디자인이 어려운 상태였고 기존에 정의된 기획안과 정책서를 바탕으로 개발이 되어야했습니다.테라스팟 프로젝트에서는 디자인 시스템 구축해서 사용중이었기에2026.01.30 - [react, next] - [카카오임팩트:테크포임팩트 다정LAB] 디자인 시스템 구축기디자인 시스템을 기반으로 AI를 활용한다면 디자인 없이도 기획만으로도 일관성있는 어드민 페이지를 2주안에 개발할 수 있지 않을까? 라는 가설에서 시작하였습니다. 본론Instructions 설계가장 먼저 한 일은 프로젝트 컨텍스트가 담긴 AI Coding Instructions를 설계하는 것이었습니다.AI가 기존 디자..

서론많은 서비스에서 도입하고 있는 디자인 시스템은 초기 구축하는데는 시간이 걸리지만, 한번 구축해두면 같은 개발 과정을 반복하지 않도록 하여 공수를 줄여줍니다. 테라스팟에서도 디자이너와 프론트 개발자가 디자인 시스템의 필요성과 작업 방식, 작업 범위를 사전에 충분히 논의하여 프로젝트 상황에 맞는 최적의 디자인 시스템을 구축할 수 있었습니다. 먼저, 프론트엔드 파트에서 테라스팟 서비스에 디자인 시스템이 필요한 이유는 다음과 같습니다.개발 가능 기간이 약 한 달로 짧았고, input, modal 등 ui와 기능이 다양했다.두 명의 프론트 개발자가 동시에 각자 기능 구현을 하면 중복 및 conflict 가 많아질 수 있다.기능 및 UI에 대한 디자인 QA를 할 시간이 없다.개발 속도와 UI 일관성을 동시에 확..

서론테라스팟 프로젝트는 6개월동안 진행된 프로젝트로, 기획 및 리서치부터 시작한 프로젝트였습니다. 따라서 최종발표회까지 온전히 6개월을 개발에만 투자할 수 없었기에 개발 환경을 구축한 후, 필수적인 기능들은 미리 작업을 진행하고 이후 디자인을 추가하는 방식으로 개발했습니다.자립 준비 청년 대상 서비스다보니 손쉬운 가입이 필요했고, 지원하는 과정에서 사용자의 정보가 반드시 필요했던 상황이라 카카오 로그인 기능을 선택했습니다. 사실 카카오 로그인은 프론트엔드에서 엄청 복잡한 로직을 가지고 있지는 않습니다. 로그인을 요청하고 성공했을때만 백엔드에서 정보를 잘 받아오면 됩니다. 하지만 백엔드에서 어떻게 성공한 정보를 받아올 것인가, 카카오 리다이렉트 url 을 백에서 처리할지 프론트에서 처리할지, 어디에서 ..

dev 배포 환경을 세팅하면서 예상치 못한 문제가 하나 발생했습니다. 바로 'Mixed Content' 에러였습니다.문제 상황저희 프론트엔드 dev 개발 사이트 주소는 HTTPS로 시작합니다. 예를 들어 https://da-jeong-frontend.vercel.app 이런 식이죠. 그런데 백엔드 API 서버는 HTTP로 통신하고 있었습니다.여기서 문제가 발생했습니다. 브라우저에는 보안 정책이 있어서, HTTPS 사이트에서 HTTP로 요청을 보내는 것을 차단합니다. 이걸 'Mixed Content' 에러라고 하는데요.쉽게 설명하자면, "안전한 곳(HTTPS)에서 안전하지 않은 곳(HTTP)으로 물건을 보낼 수 없다"는 브라우저의 보안 규칙입니다.이상적인 해결 방법과 현실이상적으로는 백엔드에서 HTTPS를..

다정LAB에서 테라스팟 서비스를 개발하기 위해 프론트엔드 개발 환경을 구축하면서 경험한 내용들을 공유하고자 합니다. 코드 품질 관리부터 Git 워크플로우, 그리고 자동 배포 시스템까지 어떻게 세팅했는지 자세히 공유할게요.기술 스택프로젝트의 핵심 기술 스택은 다음과 같습니다:Next.js & TypeScript: 프레임워크와 타입 안정성Tailwind CSS: 유틸리티 기반 스타일링Prettier & ESLint: 코드 포맷팅 및 품질 관리코드 품질 자동화 시스템코드의 일관성을 유지하는 것은 팀 프로젝트에서 매우 중요합니다. 저희는 Prettier로 코드 포맷팅을, ESLint로 코드 품질 관리를 자동화했습니다.Husky + Lint-staged로 효율적인 검사특히 Husky의 pre-commit 훅에 L..

서론웹 폰트는 사용자 경험에 직접 영향을 미칩니다. 큰 파일 크기는 LCP(Largest Contentful Paint) 같은 Core Web Vitals 지표를 악화시킵니다. 특히 한글 폰트는 영문 폰트보다 문자 수가 많아 파일 크기가 큽니다. 따라서 적절한 폰트 파일을 import하여 사용자 경험을 향상시켜야합니다.이 글에서는 브라우저 폰트에 대한 개념을 알아보고 Next.js + tailwind 프로젝트에 Pretendard 폰트를 적용하고 최적화한 경험을 다룹니다. 본론1. 폰트 포맷의 진화: woff vs woff2웹 폰트 포맷의 역사웹 폰트는 TTF/OTF, EOT(IE 전용), WOFF, WOFF2로 진화했습니다 WOFF2는 가장 높은 압축률로 더 작은 파일 크기를 가져 빠른 로딩 속도를 가..

안녕하세요!네이버 프런트엔드 개발자 모임(H26y & FE News) 에서 주관한 "[FE Ground] AI × Front-End: 코딩의 미래를 묻다." 밋업에 다녀왔습니다. 8월 29일 금요일 네이버 D2SF에서 열렸습니다.50명을 선발했는데 1200명 넘는 분이 지원해주셨다고 하네요. 이 밋업을 신청할때 제가 가지고 있었던 고민은 'AI를 사용해볼수록 AI를 어떻게 활용할지가 중요한 것 같은데, 주니어 개발자로서 AI는 가지지 못하는 개발자의 차별점은 무엇일까?' 였습니다. 이 내용을 지원동기에 녹여냈고 좋은 기회로 다양한 세션을 듣고 이 질문에 대한 답을 내릴 수 있었습니다. [식사 및 네트워킹]퇴근 후 바로 참석했는데, 식사를 제공해주셨습니다!서브웨이를 먹으면 같은 테이블에 앉으신 분들의 일..

카카오임팩트에서 진행하는 '테크포임팩트 LAB 2기' 에 참여하게 되었습니다.글또에서 테크포임팩트 모집 홍보글을 보게 되어, 서류와 커피챗 과정을 거쳐 LAB에 합류하게되었습니다. 7월 19일(토) 카카오 판교 아지트에서 킥오프가 열려 약 130명의 기술자와 사회혁신가가 모였습니다. 킥오프는 3가지 순서로 진행됐습니다.1. 테크포임팩트 소개테크포임팩트 LAB 은 카카오임팩트와 모두의연구소가 함께 진행하는 프로젝트로 약 5개월간 사회혁신가와 IT 전문가가 모여 세상의 변화를 돕는 기술을 만듭니다.테크포임팩트가 만들어내는 기술은 'Undone Science' 개념과 연관되어 있습니다.Undone Scince자금이 부족하거나, 미완성이거나, 일반적으로 무시되지만, 사회 운동이나 시민사회 조직들이 더 많은 연구..

서론input이나 textarea와 같이 텍스트 입력을 처리하는 HTML 요소로 한글을 입력할 때 원하는 대로 동작하지 않는 상황이 있습니다. 아래 vue로 작성된 예시를 보면 한글 입력시 문제가 발생합니다."ㅇ", "아", "안" 입력 중에는 `length`가 0이고, "안"이 완성되어야 `length`가 1이 됩니다. 영어를 입력하면 문제없이 입력된 글자수에 따라 length가 늘어나는 것을 볼 수 있습니다.왜 한글 입력시 'ㅇ' 만 입력해도 length가 1이 안되는 걸까요? 이번 글에서는 vue에서 IME(Input Method Editor) 조합 문자를 처리 방식을 분석하고, 한글 입력문제를 해결하기 위한 방안을 알아보겠습니다.본론먼저 이 문제가 vue의 문제인지, 아니면 브라우저에서 한글 입..

안녕하세요.오늘은 잘하는 개발자란 무엇인가에 대해 탐구해보려고 합니다. 잘하는 개발자에 대해 이야기해보기 이전에, 여러분은 개발자를 어떤 직업이라고 생각하시나요? 작년 TEO 컨퍼런스에 가서 “자신의 직업을 외계인에게 설명을 한다면 뭐라고 설명하실 건가요? 이를 그림으로 그려보세요." 라는 질문을 받았어요. 저는 제 그림을 디자이너의 그림, 기획자의 문서로 남아있는 추상적인 것을 구체적으로 사용자가 이용할 수 있는 무언가로 만들어내는 일을 하는 사람이라고 설명했어요. 컨퍼런스 현장에서 답을 내리는데는 오래 걸리지 않았습니다. 개발이라는 분야가 하는 일, 그 중 프론트엔드가 하는 일이 무엇인가를 평소에도 고민해왔기 때문입니다."왜 개발 분야를 선택했는지"는 질문은 철학과에서 복수전공을 시작하기로 결심한 ..