Interactive UI Dev &
Web Publishing
안녕하세요 배현기입니다.
인터랙티브한 UI 개발과 웹퍼블리싱을 하고 있습니다.
project
참여했던 프로젝트와 개인 사이드 프로젝트입니다
-
네이버 블로그 크롬 확장프로그램
크롬에는 다양한 확장프로그램으로 몇몇 특정 사이트에서 기능을 확장 시킬 수 있는 환경을 제공하고 있습니다. 무엇을 만들까 고민하다가, 네이버 블로그에 없는 기능을 추가해보자는 생각에서 진행해봤습니다.
-
배송 공지이미지 생성 서비스
그래서 직접 디자인을 전부 다 하기보다는, 쉽게 글자만 몇가지 고쳐 넣는 수준으로 필요로 하는 사람들도 있지 않을까? 하는 생각이 들었습니다. 그래서 사람들의 반응을 보고자 실행해본 사이드 프로젝트였습니다. 아주 단순한 기능인데 생각보다 많은 분들이 좋은 반응을 보여주셨습니다. 개선할 부분에 대한 내용을 건의 중 일부는 반영하여 적용해보기도 했습니다. 아주 작은 시도였지만 나름 보람도 있고 흥미로운 실험이었습니다.
-
SEO 키워드 분석기
. SEO에 적합한 글쓰기로서 다양한 조건이 요구되는데 그중에서도 키워드가 몇번이나 반복되고 있으며, 어느정도 비율을 차지하는지, 그리고 본문의 양은 적당한지 등 여러가지 요소들이 고려되어야합니다. 그런 부분에서 본문에서 반복되는 키워드와의 상관관계를 쉽게 알아보기 위해서 만들었습니다.
-
네이버 블로그 썸네일 디자이너
수익자동화라는 키워드로 많은 매체들이 도구로서 주목 받았습니다. 그 중에서도 블로그에 대한 관심도 꽤 높아졌고, 한국 사람에게 가장 접근성이 좋은 서비스가 네이버 블로그입니다. 많은 사람들이 블로그 썸네일을 만들기 위해서 도구 선택에 고민하는 모습을 보았습니다. 역시 손쉬운 도구가 있으면 좋겠다는 생각이 들었습니다. 이 도구는 포토샵이나 피그마와 같은 전문적인 그래픽 소프트웨어를 다루기 어려워하는 사람들을 위한 아주 간소한 기능만 제공하고 있습니다
-
굿노트 템플릿 디자이너
굿노트 템플릿 디자이너는 현재 간단한 줄눈 노트만 생성이 가능합니다. 하지만, 줄눈의 굵기, 간격, 색깔, 화면 안에서 상하 좌우 어느 위치건 자유롭게 조절할 수 있는 커스터마이징 환경을 제공합니다. 리액트로 제작되어 인터랙티브한 환경을 제공하는데 많은 도움이 되었습니다.
-
반응형 HTML/CSS 코드 생성기
HTML/CSS가 어려운 디자이너를 위해 만들었습니다. 일반적으로 디자인 업무만 진행해 온 사람들에게는 HTML/CSS가 생소하고 어렵습니다. 하지만 실무 현장에선 웹디자이너에게 종종 HTML/CSS로 웹페이지의 일부에 동영상이나 이미지를 반응형으로 추가하기를 요구하곤 합니다. 개발에 대해 조금이라도 관심이 있는 사람에겐 그리 어려운 일이 아닙니다만, 경험이 부족한 사람들에게는 제법 어려운 일입니다. 그래서 커뮤니티나 카페 같은 곳에 줄곧 같은 질문이 많이 올라오는 것을 눈여겨 봤습니다. 이제 반응형 코드를 만드는데 큰 고민을 하지 않아도 됩니다.
-
인스타그램 프로필링크 마이크로 웹사이트
직접 그린 벡터 일러스트레이션을 Lottie 애니메이션으로 변환하여 만든 마이크로 웹사이트입니다. 인스타그램과 같은 SNS에서 자주 쓰이는 프로필 링크에 연결하는 것이 주된 목적입니다. 그래서 간결하게 링크들만 전달하는 것이 보통이지만, Lottie 애니메이션과 같은 비주얼적인 요소를 강조한 아이디어를 구현해보고자 만들었던 사이트입니다.
blog
공부하고, 기록하고, 공유하고 있습니다
김프(GIMP)에서 인터페이스 - UI 글자 크기 키우기
Gimp(김프)에서 UI 글자 크기가 너무 작아서 보기 힘들다면, 설정을 통해 UI의 폰트사이즈를 조절할 수 있습니다.
반응형 타이포그래피 - 유동적인 폰트 사이즈를 만들어주는 Fluid Type Scale Calculator
직접 디자인시스템을 구축해본 적은 없지만, Bootstrap이나 TailwindCSS와 같은 라이브러리를 사용하다보면, 체계적인 타이포그래피 시스템
HTML,SCSS,Javascript를 이용한 반응형 header - 메뉴바 소스
HTML,SCSS,Javascript를 이용한 반응형 header - 메뉴바 소스를 공유합니다
라라벨에서 로그아웃 후 브라우저 뒤로가기로 이전 페이지 접근 방지하는 방법, 캐싱 문제 해결
라라벨11에서 로그아웃 후 뒤로가기로 이전 페이지 노출 문제를 해결하는 방법과 캐시 무효화 방식의 장단점을 설명합니다. 캐시 무효화로 보안은 강화되지만 성능 저하와 서버 부하 증가의 단점이 있어 상황에 맞게 적용해야 합니다.
테일윈드CSS 클래스명을 감춰주는 - Tailwind Fold
TailwindCSS는 편리하지만 클래스명이 지나치게 길어져 가독성이 떨어지는 단점이 있습니다. 하지만 Tailwind Fold 확장 프로그램을 사용하면 클래스명을 자동으로 감출 수 있어 가독성 문제를 해결할 수 있습니다. VS Code에서는 설정을 통해 자동 감추기와 클릭 시 펼치기 기능을 활성화할 수 있습니다.
2024년에 PHP를 다시 돌아보며 느낀 점들
PHP는 웹 개발에 오랫동안 사용되어온 언어로, 간단한 웹사이트부터 복잡한 웹 애플리케이션까지 다양하게 활용될 수 있습니다. SSR(Server-Side Rendering)을 기본적으로 지원하며, 저렴한 웹호스팅에서도 구동 가능해 제작 비용을 절감할 수 있습니다. 또한 내장 기능이 풍부해 라이브러리 의존도가 낮은 편입니다.
contact
부담없이 가벼운 커피 타임을 가져도 좋습니다. 편하게 연락주세요 :)