프론트엔드 엔지니어가 AI로 완성한 n8n 랜딩 페이지 제작 후기 \:\ 기획, 디자인, 개발의 통합 경험
AI 도구를 활용해 n8n 랜딩 페이지를 기획부터 디자인, 개발까지 완성한 과정을 공유했습니다. 각 단계별 도구 활용법과 생산성을 높이는 실무 팁을 정리했습니다.
#Figma#Canva
1400
프론트엔드 기술 블로그 최신 글
필터 0
프론트엔드 엔지니어가 AI로 완성한 n8n 랜딩 페이지 제작 후기 \:\ 기획, 디자인, 개발의 통합 경험
AI 도구를 활용해 n8n 랜딩 페이지를 기획, 디자인, 개발한 경험을 공유했습니다. 단계별로 도구를 분리해 사용하며 속도와 품질을 함께 높인 과정이 핵심입니다.
#Figma#Notion AI
17700
나만의 Visual Studio Code Copilot 지침 만들고 활용하기
나만의 Visual Studio Code Copilot 지침 만들고 활용하기
VS Code Copilot에 커스텀 지침을 넣어 반복 프롬프트 없이 개인·프로젝트 규칙을 반영하는 방법을 소개했습니다. 지침 파일과 프롬프트 파일을 활용해 코드 생성, 테스트, 커밋 메시지까지 일관되게 관리할 수 있었습니다.
#Visual Studio Code#GitHub Copilot
54500
캐치테이블 지도 개발기(2편)
지도와 리스트를 하나의 화면에서 자연스럽게 전환하는 하이브리드 뷰를 도입한 과정을 다뤘습니다. 웹 뷰 성능 최적화로 사용자 수와 예약 완료 지표도 개선했습니다.
#검색#UI/UX
47100
Chrome 확장 프로그램 개발 가이드
Chrome 확장 프로그램의 활용 사례와 장점을 소개하고, Manifest V3 기반 개발 구조를 설명했습니다. Content Script, Service Worker, Shadow DOM을 활용한 구현 방식도 정리했습니다.
#Chrome#JavaScript
13100
토스의 디자인 편집기 ‘데우스’, 이렇게 만들었어요! | EP.11
토스가 자체 디자인 편집기 데우스(Deus)를 만든 이유와 개발 과정을 소개했습니다. 상태 관리로 MobX를 선택한 배경과 기술적 도전도 함께 다뤘습니다.
#UI/UX#성능
21700
여기어때 시스템 아이콘 개선기
기존 시스템 아이콘의 스타일 불일치와 가독성 문제를 개선한 과정을 공유했습니다. 브랜드 아이덴티티를 반영한 그래픽 규칙으로 일관성과 사용성을 높였습니다.
#UI/UX#design
22500
Android SharedFlow, StateFlow 도입기
Android 내비게이션 엔진 도입 과정에서 Kotlin의 SharedFlow와 StateFlow를 적용한 사례를 소개했습니다. 발췌만으로는 구체적인 문제 해결 내용은 충분히 확인되지 않았습니다.
#Android#Kotlin
3100
Next.js Server Action과 프론트엔드 보안
Next.js Server Action의 내부 동작과 보안 주의점을 설명했습니다. 편의성 뒤에 있는 인증·인가, 입력 검증, 인젝션 방지 책임을 강조했습니다.
#Next.js#React
1500
Next.js Server Action과 프론트엔드 보안
Next.js Server Action의 동작 방식과 기본 보안 메커니즘을 설명했습니다. 편의성 뒤에 숨은 인증·인가, 입력 검증, SSRF 등 보안 책임을 강조했습니다.
#Next.js#React
2100
Next.js Server Action과 프론트엔드 보안
Next.js Server Action의 동작 방식과 보안 주의를 정리했습니다. 편의성만 믿지 말고 입력 검증, 인증/인가, 주입 공격 대응을 함께 챙겨야 합니다.
#Next.js#Server Action
9400
테스트는 어떻게 좋은 코드를 만드는가(feat. 험블 객체 패턴)
테스트는 어떻게 좋은 코드를 만드는가(feat. 험블 객체 패턴)
테스트 코드가 어려워지는 원인을 고수준 목과 얽힌 설계 문제로 설명했습니다. 험블 객체 패턴과 인터페이스로 테스트하기 쉬운 구조를 만드는 방법을 다뤘습니다.
#TypeScript#TDD
29400
코드 품질 개선 기법 6편: 마구 자를 것인가 반듯하게 자를 것인가
줄 바꿈은 코드를 의미 단위로 나눌 때 더 읽기 쉬워집니다. 메서드 체인, 폴백 체인, 엘비스 리턴은 의미가 크게 갈리는 지점에서 끊는 것이 좋습니다.
#Kotlin#refactoring
19400
ESBuild를 위한 HMR, 직접 만들기
프론트엔드 개발 경험을 높이는 HMR의 원리와 번들러별 구현 방식을 비교했습니다. ESBuild 기반 번들러에 HMR을 직접 붙인 과정을 통해 실시간 반영과 상태 유지를 구현했습니다.
#ESBuild#HMR
13400