본문 바로가기

개발 및 퍼블리싱6

API와 사용성 개인 프로젝트를 개선하는 과정에서 가장 신경 쓰였던 부분은 웹 브라우저의 위치 정보 권한 요청이었다. 모바일 앱과 달리 웹 브라우저에서는 위치 정보 권한을 지속적으로 요청하게 되는데, 이는 사용자 경험을 저해하는 요소였다. 당시에는 이를 대체할 만한 해결책을 찾지 못했었다. 그러던 중 Cursor를 사용하면서 우연히 알게 된 API를 통해 위치 정보 권한 요청을 대체할 수 있었고, 이를 통해 서비스의 사용성을 크게 개선할 수 있었다.IP기반 API네이버 지도를 사용하던 중 문득 GPS가 없는 데스크톱 환경에서는 어떻게 위치 정보를 획득하는지 궁금증이 생겼다. 현재 위치 찾기 기능을 테스트해 보니 정확한 위치가 아닌 대략적인 위치만 표시되었는데, 이는 IP 주소를 기반으로 위치를 추정하는 방식이었다. Cu.. 2025. 1. 21.
디자이너의 Cursor 사용기 AI 관련 툴을 사용한 지 2년 가까이 지난 거 같다. 처음에는 미드저니로 시작해서 ChatGPT, Claude 등등 디자인 분야에서도 Figma가 최근 AI 관련 기능을 도입했지만 프로그래밍 분야보다는 대체되는 속도가 느리다고 생각한다. 일단 Figma에서 생성하는 디자인은 실제로는 써먹기 힘들고 생성해도 수작업으로 수정을 많이 거쳐야지 쓸모가 있어진다. 오히려 수정하는데 시간과 노력이 더 많이 들어가는 경우도 있다. 이런 생각을 가지고 기존에 작업했던 프로젝트에서 수정할 일이 생겨서 이번엔 Cursor를 사용해서 작업해 보기로 하였다.가입 및 설치가입하고 요금을 결제하려고 했는데 처음 사용자의 경우 2주 동안 무료이고 정해진 크레딧이 있다. 프리미엄 모델의 경우 500회, 나머지는 무제한이지만 프리미.. 2025. 1. 20.
TailwindCSS 얼마나 많이 쓸까? 개인 프로젝트의 경우 무조건 TailwindCSS를 사용해서(심지어 앱 개발을 경험하면서도 NativeWind라는 라이브러리를 사용했다) 디자인 토큰 및 레이아웃 설정, 퍼블리싱을 진행하는데 디자이너 입장에서 원활한 수정은 크나큰 무기가 된다. 더욱이 퍼블리싱도 직접 하다 보니 피그마와 실제 브라우저에서 느껴지는 이질감 개선이나 반응형 디자인 적용도 빠르게 가능하다. 다크 모드는 비교적 순식간에 적용이 가능하다. 그런데 국내 대부분의 서비스에서는 TailwindCSS를 보기가 힘든게 사실이다. 모든 서비스를 체크해보지는 못했지만 최근 구직하면서 JD를 체크하는 회사의 서비스는 대부분 TailwindCSS를 사용하지 않는다. 그래서 일단 Product Hunt의 최근 월간 랭킹을 기준으로 상위 50개 웹 .. 2025. 1. 17.
Scroll Frames 라이브러리 사용기 Scroll Frames - 라이브러리 링크 개인 포트폴리오 사이트를 준비하면서 개인적인 강점인 모션그래픽 역량을 강조하기 위한 방법을 찾으려고 했다. 단순히 동영상을 올리기보다는 인터랙티브하게 동작하는 방법을 찾다가 Scroll Frames라는 라이브러리를 발견했다. 라이브러리 문서를 보면서 느낀 특징은 모션그래픽, CSS, JS에 대한 이해도를 동시에 요구했으며, 쉽게 사용이 가능한 라이브러리는 아니라고 생각이 들었다.라이브러리 컨셉일단 요구하는 동영상 포맷은 일반적은 동영상 파일이 아니라 이미지 시퀀스이다. 이미지 시퀀스는 하나의 동영상 파일이 아닌 정지 영상 즉 png 혹은 webp 같은 이미지 파일의 묶음이라고 생각하면 된다. webp의 파일 크기가 작아 효율적이기 때문에 애프터 이펙트에서 pn.. 2025. 1. 11.
TailwindCSS 스타일 컬러 팔레트 디자인 시스템이 유행하기 전부터 디자인 토큰, 즉 컬러 팔레트와 타이포그래피 정리는 기본 중의 기본이지만, 가끔 다른 디자이너의 디자인 시스템을 보게 되는 경우가 있다. 그때 Surface, Primary 컬러를 각각 3~5개 정도로만 정리하는 경우를 많이 보았다. 보기에는 심플하고 충분해 보이겠지만, 실무에서 최소 퍼블리싱이나 UI를 구현해본 경험이 있다면 현실과 괴리가 있다는 느낌을 받을 것이다. 특히 다크 모드를 고려하는 프로덕트라면 더욱 그렇다. 프로덕트의 구조적 특징에 따라 다르겠지만, 시각적 구분이 명확해야 하는 경우, 예를 들어 대시보드 형태의 화면 구성이 필요하다면 Surface 컬러 3~5개로는 너무 부족한 것이 사실이다.TailwindCSS의 인기최근 TailwindCSS의 인기가 많다.. 2025. 1. 6.
간단한 캐러셀 만들기 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: Scaffold( body: Home(), ), ); } } class Home extends StatefulWidget { @override _HomeState createState() => _HomeState(); } class _HomeState extends State { List images = [ 'https://images.un.. 2021. 4. 12.