Freaktion

웹의 모든 요소들이 움직여야 할까 - 움직임도 하나의 자원이에요.

2026-04-22T02:01:56Z

안녕하세요, 독자님. 요즘은 손을 뻗기만 하면 프론트엔드에 직접 기여할 수 있어요. 평소에 개발자에게 요청하기 어려웠던 동세도 직접 만들어서 보여줄 수 있게 됐는데요. 어떤 것을 어떻게 움직일지 보다는 어떤 것을 움직이지 말지가 더 중요하다는 사실 알고계셨나요? 할 수 있어서 모든 요소들에 인터랙션을 넣기 보다는, 뾰족한 의도를 담아서 인터랙션을 설계하

디자이너가 고른 색은 왜 서로 다를까 - HSL이 거짓말을 하고 있기 때문이에요.

2026-03-23T03:28:21Z

상태값에 사용할 초록색, 주황색, 빨간색을 나란히 놨을 때 유독 빨간색이 눈을 아리게 할 때가 있지 않나요? HSL로 동일한 L 값을 설정했음에도 불구하고 어떤 색은 더 밝아보일 때가 있죠. 그럼 시각 보정을 하듯이 직접 값들을 수정해서 맞추는 경우가 많았는데요. 이런 귀찮은 상황을 피할 수 있게 해주는 OKLCH 시스템에 대해 알아보겠습니다. 왜 H

사용법을 알기 전에 일단 그냥 써봐요 - 만져봐야 알 수 있는 게 있어요.

2026-03-20T09:25:48Z

안녕하세요, 전데요. 모름지기 홍대병이 있다보니, AI로 핫한 요즘 크게 AI 관련된 소재로 글을 적지는 않는 편입니다. 그래도 오늘은 AI에 관해서 글을 적어보고 있습니다. "AI를 어떻게 쓰나요?" AI를 "어떻게" 활용하는지를 물어보시는 경우가 많은데 사실 그냥 피그마 가져다 쓰는거랑 비슷합니다. 내가 꼭 피그마를 써야지 하고 피그마를 쓰는게

사용자 경험에서의 마찰감 - 마찰감의 감칠맛과 그 유형들

2026-04-22T00:33:00Z

이 글에서는 프릭션 = 마찰감으로 다루고 있습니다. 안녕하세요, 접니다. 어떤 디자이너들은 사용자 경험에서 프릭션을 문제로 봅니다. "이 경험에는 프릭션이 너무 많아요." 하고 어떻게 경험을 심리스하게 만들지 고민합니다. 저는 프릭션을 미원으로 봅니다. 감칠맛이 좋거든요. 단계를 생략하거나, 줄이거나, 화면을 단순화하는 것과는 다른 맛을 줍니다.

심리스에 대한 오해 - 슬릭한 건 모두 심리스할까?

2026-01-14T00:32:16Z

심리스하고 슬릭한 제품은 멋있습니다. 내 손 끝에서 세상이 일사불란하게 움직이는 기분이 들 때 약간의 희열마저 느껴집니다. 이번 글은 심리스한 경험에 대해 알아보고, 심리스에 대한 오해를 알아보겠습니다. 심리스한 경험은 뭘까? 우리는 보통 마찰이 없는 원활한 경험을 심리스하다고 하는데요. 질감으로 표현하면 매끈매끈하고 부드러운 비단 같은 느낌이겠

새로운 해자를 찾아서 - 2025년 회고

2026-01-11T14:46:35Z

인간은 AI의 발전을 두려워합니까? (로봇이 관자놀이 짚는 짤) 최근 슬랙의 코파운더 스튜어트 버터필드와 피그마의 코파운더 딜런 필드가 팟캐스트에서 공통적으로 '안목(Taste)'에 대해서 언급을 했다. 인공지능이 사람의 손을 대체하고 있으니 눈이 더 중요해진다는 것일까 싶다. 인간은 하나의 감각이 사라지면 남은 감각들을 극한으로 키워서 적응한다고 한다

좋은 사용자 경험이라고 착각하지 않기 - 나는 사용자가 아니란 걸 명심하기

2025-12-31T06:33:24Z

경험은 화면이 아니라 사용자의 머릿 속에 있고 사용자는 저마다의 목표과 맥락을 가지고 있다. 좋아 보이는 사용자 경험을 좋은 사용자 경험으로 착각하지 않기 위해 메모를 남긴다. 착각 1. 축하해주면 사용자가 행복해 할까? 폭죽을 터트리고 축하를 하면 사용자의 선택에 대해 긍정적인 감정을 줄 수 있으니까, 좋은 사용자 경험이구나 라고 생각할 수 있다.

디지털 유목민의 Comet과 Atlas 비교 - 집주인 정하기

2026-01-22T03:20:26Z

오늘 10월 22일 OpenAI가 AI 내장 브라우저 Atlas를 출시했습니다. 글쓰기 말고는 다 인공지능한테서 훈수를 받고 있는 디지털 월세 유목민, 제가 두 AI 탑재 웹 브라우저를 비교해 보고 집주인을 정해보겠습니다. Comet에서 보이는 것 Comet은 크롬과 파이어폭스 사이 그 무언가 처럼 보이는데 보여주고 싶은 게 몹시 많은 것 같습니

그레이패턴과 다크패턴 - 사용자의 의도와 다른 행동을 유도하는 것

2025-11-10T06:22:36Z

뇌를 빼고 제품을 쓰다보면 어느새 내 의도와 다른 행위를 하고 있는 경험이 있으신가요? 그레이패턴의 영향을 받으셨을 가능성이 있습니다. 이번 글에서는 그레이패턴이 무엇인지, 다크패턴과 어떻게 다른지 그리고 왜 윤리적인 디자인을 해야 하는지에 대해 적었습니다. 그레이패턴은 무엇인가? 그레이패턴은 거짓이나 강요는 아니지만 사용자의 의도와는 다르게 행동하

행동 촉구에 유용한 FBM - 행동은 쉽게 일어나지 않습니다.

2025-11-10T06:23:17Z

이 글은 스탠퍼드대학교 BJ Fogg 교수가 발표한, 행동 설계(Behavior Design)·설득 기술 분야의 행동 예측 모델 Fogg Behavior Model을 기반으로 쓰였습니다. Fogg Behavior Model은 무엇인가? Behavior = Motivation * ability * prompt는 행동은 '하고 싶은 마음' 동기, '하기

M3 Expressive Design 겉핥기 - Better, Easier, Emotional UX

2025-07-31T12:36:54Z

요 근래에 구글의 로고에 그라데이션이 생겼다는 소식으로 떠들썩한데 구글 디자인 시스템인 M3에도 변화가 찾아왔습니다. 애플의 HGI와 함께 디자인 시스템계의 양대산맥인데요. 맥북 뒤에 에어가 붙는 것처럼, M3 뒤에 Expressive가 붙었네요. 기존에 M3에 있었던 emphasis를 더 극적인 형태로 표현하는 특징이 있습니다. 위 이미지는 새로 추

피드백과 포워드 - 티키타카

2025-08-06T00:41:21Z

피드백은 과거의 행동을 되돌아보고 개선하는 과정을 의미합니다. 마치 넘어졌을 때 무엇이 문제였는지 점검하고, 다음에는 넘어지지 않도록 조치를 취하는 것과 같습니다. 피드백은 UX 디자인 안에서도 밖에서도 중요한 요소입니다. 피드백 사용자는 자신의 행동에 대한 피드백을 받아야 할 권리가 있습니다. 제품은 화면을 변화시킴으로써 피드백을 제공할 수 있습니다.

그 케첩병과 UXUI - 왼쪽이 어쩌구 오른쪽이 어쩌구

2024-02-15T03:53:08Z

UX를 공부하며 한 번씩은 보셨을 하인즈 케첩병 사진입니다. 저도 고등학교 시절 어디 UX 에이전시에 현장학습 갔을 때 본 기억이 있습니다. 왼쪽 케첩병이 얼마나 보기 좋으면서 끔찍한지를 이야기하고 오른쪽 케첩병의 사용성을 칭송하는 것으로 이야기를 마칩니다. 오른쪽 케첩병은 원하는 만큼의 케첩만을 짜낼 수 있다면서요. 하지만 정확히 이야기하자면 이 사진

UI 색상 팁 3가지

2023-11-23T03:15:11Z

색상은 강한 힘을 가지고 있다, 강한 힘에는 강한 책임이 필요하다. 개인적으로 색상을 책임감 있게 사용하는 게 UI 디자이너로서 가져야 할 기본적인 자세라고 생각한다. 충분한 대비 확보하기 대비는 서로 다른 색들이 얼마나 뚜렷하게 구분되는지를 나타낸다. 웹 콘텐츠 접근성 가이드라인(WCAG)에서 자주 볼 수 있는 표현 중 하나인 4.5:1은 색상이

심미성이 아닌 사용성을 위해 - 유리로 만든 망치

2025-10-16T08:15:45Z

'감각으로만 UI를 디자인한다'는 '눈 감고 운전한다'와 비슷하다. 운전할 땐 전방주시 하는 게 맞다. 디자이너는 사용자를 위한 디자인을 해야 한다. '회색의 얇은 글씨가 예쁘더라' 하고 얇은 회색 글씨로 서비스를 도배하면 눈이 좋지 못한 사용자들은 글을 보지 못한다. '타이틀에 강조색을 넣어서 강렬하게 보여야지' 하면 링크로 오인해서 클릭하는 사용자들

개발자의 UX를 위해 소소하게 노력하고 있는 7가지 - 더 나은 협업을 위해

2025-11-10T06:32:41Z

개발자와의 협업은 매우 중요하다. 협업은 잘못하면 서로의 역량을 깎아 먹고 잘하면 시너지를 내는 만큼, 더 나은 협업을 위해 노력해야 한다. 이 글은 나름의 노력들에 대해 적었다. 더 일찍, 더 자주 대화하기 디자인을 다 마친 후 핸드오프하는 과정이 아닌 제품이나 기능의 설계 단계부터 대화를 나누는 걸 추천한다. 우리가 생각하고 있는 디자인이 개발자 입

투명한 디자인이 끌어올린 23% 성장 - Config - 돌아보기

2023-12-07T18:48:27Z

이 글은 컨퍼런스 세션 중 Jaycee Day의 'Transparency always wins: How ethical design led to 23% growth'에 대해 적었습니다. 윤리적인 디자인이 비즈니스와 사용자 모두에게 좋은 영향을 끼치는 사례를 소개하고 있습니다. 이 사례의 주인공인 Blinkist는 긴 책을 15분 정도의 짧은 길이로 요약해

자동으로 테마가 바뀌는 컴포넌트 만들기 - Figma Variables

2023-12-07T18:48:11Z

피그마 콘퍼런스에서 러닝 커브를 높이는 신기능 Variables를 발표했습니다. 빠른 속도로 발전하는 피그마를 주로 사용하다 보니 배울게 점점 늘어나는 거 같습니다. 그래서 더 매력있고 재미있는 툴이라고 생각합니다. 콘퍼런스에서 봤던 예시들 중에서 프레임의 테마에 따라 자동으로 변화하는 컴포넌트를 만들어보겠습니다. 1. 가볍게 컴포넌트를 디자

버튼의 마이크로카피 - 네, 아니오 대신에 쓸 말은 많잖아요.

2023-12-07T18:47:52Z

마이크로카피? 웹이나, 앱에서 볼 수 있는 글귀들을 모두 마이크로카피라고 불러요. 오류 페이지에서 '죄송합니다,'로 시작하는 글도 마이크로카피 회원가입 마무리 버튼의 '가입 완료하기'도 마이크로카피예요. 좋은 마이크로카피의 장점 잘 쓰여진 마이크로카피는 사용자의 경험을 향상시켜줘요. 또 사용자가 오류를 범할 확률을 줄여주기도 하죠. 또 독특한 톤의 카피

피그마의 컴포넌트 기초 알아보기

2023-12-07T18:46:36Z

컴포넌트 컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 말해요. 피그마에서도 같은 의미로 쓰이는데 재사용이 가능한 오브젝트를 말하고 레고와 같은 블록 장난감에 많이 비유하고 있어요. 인스턴스 인스턴스(Instance)는 컴포넌트가 자기 복제로 낳은 자식이에요. 컴포넌트의 모든 것을 따라 하지만 자기 개성도 중요시하