본문 바로가기

개발 및 퍼블리싱7

폰트사이즈 em, rem 단위의 유래는 뭘까? 오늘도 채용 공고에 올라온 여러 서비스를 개발자 도구로 보다가 오랜만에 px가 아닌 rem으로 작성된 서비스가 보였다. TailwindCSS로 작성되었다면 기본적으로 rem 단위를 사용하지만 해당 서비스는 SCSS로 작성되어 있어서 눈에 들어왔던 거 같다. 어쨌든 rem이 root em인건 알고 있는데 막상 em의 유래가 무엇인지는 몰랐다 바로 claude에게 물어봤는데 em이 emphasize의 약자라는 것이다. 그럴듯하지만 강조하다라는 의미와 폰트사이즈가 무슨 상관일까?라는 생각이 들어 계속 캐물으니 계속 답변이 달라졌는데 할루시네이션이 확실했다. 그래서 꾸역꾸역 구글에서 em, rem 관련 검색을 이어갔는데 대부분 em, rem의 작동 원리에 대해서만 알려주는 글이 많았다. 혹시나 해서 위키피디아를.. 2025. 3. 25.
RGB vs HSL vs OKLCH 최근 업데이트된 테일윈드 V4에 OKLCH 방식이 적용되면서 기존에 사용되던 RGB, HSL과 비교하면서 리서치를 해보았다. 웹 개발자든 디자이너든 이 세 가지 색상 모델의 차이점을 이해하면 더 효율적이고 일관된 디자인 시스템을 구축할 수 있을 것이다RGB: 디지털 세계의 기본 색상 모델RGB는 Red, Green, Blue의 약자로, 디지털 디스플레이에서 가장 기본적으로 사용되는 색상 모델이며 각 채널은 0부터 255까지의 값을 가지고, 이 세 가지 색상의 조합으로 다양한 색상을 표현한다직관적인 숫자 표현 - rgb(255, 0, 0)은 빨간색, rgb(0, 255, 0)은 초록색을 의미웹 브라우저 호환성 - 모든 브라우저에서 완벽하게 지원헥스 코드(#RRGGBB) - 웹 개발에서 널리 사용되는 간결한.. 2025. 2. 28.
API와 사용성 개인 프로젝트를 개선하는 과정에서 가장 신경 쓰였던 부분은 웹 브라우저의 위치 정보 권한 요청이었다. 모바일 앱과 달리 웹 브라우저에서는 위치 정보 권한을 지속적으로 요청하게 되는데, 이는 사용자 경험을 저해하는 요소였다. 당시에는 이를 대체할 만한 해결책을 찾지 못했었다. 그러던 중 Cursor를 사용하면서 우연히 알게 된 API를 통해 위치 정보 권한 요청을 대체할 수 있었고, 이를 통해 서비스의 사용성을 크게 개선할 수 있었다.IP기반 API네이버 지도를 사용하던 중 문득 GPS가 없는 데스크톱 환경에서는 어떻게 위치 정보를 획득하는지 궁금증이 생겼다. 현재 위치 찾기 기능을 테스트해 보니 정확한 위치가 아닌 대략적인 위치만 표시되었는데, 이는 IP 주소를 기반으로 위치를 추정하는 방식이었다. Cu.. 2025. 1. 21.
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.

티스토리툴바