제품을 만든다는 건 kludge를 쌓는 일이다
마감을 이틀 앞두고, 고객 하나가 자기네 화면만 다르게 보여달라고 한다. 처음 기획에는 없던 요구다. 초기 설계 그대로는 대응할 수 없는 지점에 부딪힌 거다. 제대로 하려면 설정 …
Posts
오래된 글 보기
오래되어 지금 기준과 다를 수 있는 글을 목록에 함께 보여줍니다.
10/11한글 웹 타이포그래피 (10) 문장부호가 데려오는 사이 공간
약 7분
지금까지 이 시리즈는 글자 사이(자간), 줄 사이(행간), 글자 안(속공간), 글자 곁(사이드베어링)의 흰 공간을 다뤘다. 이번엔 글자가 아닌 것이 데려오는 흰 공간이다. 괄호와 …
11/11한글 웹 타이포그래피 (11) 폴백 폰트가 밀어내는 줄
약 12분
7편에서 폴백 폰트를 잠깐 짚고 넘어갔다. 웹폰트가 도착하기 전 시스템 폰트로 먼저 글자를 그려 독자를 바로 읽게 하는 font-display: swap을 쓰면, 폰트가 바뀌는 순 …
8/11한글 웹 타이포그래피 (8) 속공간과 커닝
약 12분
5편에서 본문 자간은 0, 행간은 1.8로 정했다. 그런데 이상하지 않은가. 둘 다 글자 사이의 빈 공간을 다루는 값인데, 하나는 손대지 말라 하고 하나는 넉넉히 벌리라 한다. …
9/11한글 웹 타이포그래피 (9) 줄상자의 해부
약 10분
5편에서 행간을 1.8로 정했고, 8편에서 왜 그렇게까지 벌리는지를 세로 속공간으로 설명했다. 그런데 우리가 line-height: 1.8이라고 쓸 때, 브라우저는 정확히 무엇을 …
음수는 어떻게 만들어졌나, 그리고 음수 곱하기 음수는 왜 양수인가
약 9분
영하 3도, 빚 3만 원, 지하 2층. 마이너스는 지금 너무 당연하지. 그런데 이 0보다 작은 수가 수학에서 어엿한 수로 인정받기까지 수백 년이 걸렸어. 유럽에선 부조리한 수, 거 …
10%라는 말: 확률이 정말 뜻하는 것
약 4분
쿠폰 룰렛 이벤트를 하나 만들었다. 룰렛을 돌리면 10% 확률로 쿠폰이 당첨되는 이벤트고, 화면에 “당첨 확률 10%“라고 큼직하게 적어 내보냈다. 며칠 뒤 CS로 항의가 들어온 …
퍼센트와 퍼센트포인트: '20% 개선'이라는 말의 함정
약 4분
실험 채널에 메시지가 뜬다. “이번 실험 대박입니다. 전환율 20% 개선됐어요!” 축하 이모지가 우수수 달리고 팀이 들뜬다. 그런데 이 한 문장은 사실 거의 아무것도 말해주지 않는 …
3/3쉬운 복소수 (3) i를 곱하면 90도 돈다
약 7분
곱하기가 회전이라면 믿겨? 수를 키우는 그 곱하기 말이야. 그게 복소평면에선 화살표를 빙 돌리는 일이 돼. 이게 이 시리즈에서 제일 신기하고 예쁜 대목이야. 겁부터 풀고 가자. 곱 …
2/3쉬운 복소수 (2) 복소평면, 수를 평면에 놓다
약 7분
지난 편에서 i를 만들었어. 제곱하면 −1이 되는, 우리가 새로 정한 수 말이야. 기억 안 나도 괜찮아. 딱 하나만 들고 오면 돼. i는 수직선 위엔 없어서 선 밖 위로 튀어나갔 …
1/3쉬운 복소수 (1) 허수 i, 없는 수를 만든 사건
약 8분
제곱해서 −1이 되는 수? 그런 거 없다고 배웠지. 실제로 우리가 아는 수 중엔 없어. 그 말, 틀린 거 아니야. 근데 사람들이 결국 그런 수를 하나 만들어버렸어. 없으면 규칙을 …
기다림을 설계하기: 낙관적 UI와 노동 착시
약 11분
채팅 앱에서 메시지를 보낸다. 전송 버튼을 누르면 0.4초쯤 스피너가 돌다가 말풍선이 올라온다. 그 0.4초 동안 화면은 멈춘 것처럼 보이고, 급하면 버튼을 한 번 더 누른다. 그 …
불가능한 상태를 불가능하게: UI를 상태 기계로 모델링
약 12분
데이터를 불러오는 컴포넌트를 하나 떠올려보자. 목록을 API에서 받아 그리는 아주 흔한 화면이다. 처음엔 스피너를 돌리고, 응답이 오면 목록을 그리고, 실패하면 에러 배너를 띄운 …
스프링 애니메이션: 언제 쓰고 어떻게 조절하나
약 8분
바텀 시트를 손가락으로 반쯤 끌어 올리다 놓는다. 손끝은 위로 빠르게 움직이던 중이었다. 그런데 놓는 순간 시트가 그 속도를 이어받아 스르륵 끝까지 올라가는 게 아니라, 잠깐 멈칫 …
3/3쉬운 수열 (3) 극한, 다가감을 다루는 언어
약 7분
0.999…가 1이랑 정확히 같다면, 믿겠어? 소수점 뒤로 9가 끝없이 이어지는 그 수 말이야. 1에 가깝다도 아니고 정확히 1이래. 지금 갸우뚱했다면 그게 정상이야. 그런데 이 …
2/3쉬운 수열 (2) 끝없이 더했는데 유한하다
약 7분
끝없이 더하면 무조건 무한대일 것 같지? 아니야. 끝없이 더했는데 딱 유한한 값에서 멈추는 일이 진짜로 벌어져. 오늘은 그 얘기다. 미리 겁부터 풀어줄게. 무한히 더한다는 말, …
1/3쉬운 수열 (1) 수열, 규칙으로 줄 세운 수
약 8분
통장에 돈을 넣어두면 이자가 붙어. 그런데 그 이자에 또 이자가 붙어서, 가만히 둬도 해마다 조금씩 불어나지. 계단은 또 어때. 한 칸 오를 때마다 바닥부터의 높이가 똑같이 쌓여 …
A/A 테스트, 똑같은 화면을 둘로 나눠 겨루게 하는 이유
약 8분
새 실험 결과가 도착했다. 그런데 이번엔 좀 이상하다. A안과 B안을 비교했는데, 두 안이 사실은 완전히 똑같은 화면이다. 글자 하나 다르지 않다. 그런데도 전환율이 다르게 나왔 …
A/B 테스트를 매일 훔쳐보면 안 되는 이유
약 9분
새 결제 화면을 A/B 테스트로 올렸다. 실험 대시보드는 실시간이라, 아침마다 커피 들고 숫자를 확인한다. 1일차, 2일차는 무승부. 그런데 3일차 아침, 드디어 초록불이 들어온 …
A/B 테스트를 언제 하고 언제 하지 말아야 하나
약 10분
회의에서 이런 장면이 반복된다. 결제 폼에 필수 항목인데 별표가 안 붙은 칸이 있다. 누가 봐도 별표를 붙여야 한다. 그런데 실험 문화가 자리 잡은 팀일수록 이런 말이 나온다.
A/B 테스트만 하면 왜 어느 순간 안 올라갈까
약 7분
전환율을 A/B 테스트로 계속 올리는 팀이 있다. 버튼 색을 바꿔 0.3%p 올렸다. 문구를 바꿔 0.2%p 올렸다. 여백을 줄여 0.1%p 올렸다. …
B2B에선 왜 깔끔한 A/B보다 빠른 묶음 실험인가
약 8분
B2B 제품의 온보딩을 개선하려는 팀이 있다. 디자이너가 실험 계획을 세운다. 첫 화면 버튼 문구만 바꿔 A/B 테스트를 돌리고, 다음엔 입력 폼 순서만 바꿔 또 돌리고, …
p-value의 오해, 유의확률이 말해주지 않는 것
약 8분
분석 결과가 왔다. “새 온보딩 화면 전환율이 기존보다 높다. p = 0.03.” 디자인 보고서에 그렇게 적었다. 회의에서 그 한 줄이 인용된다. “유의미한 차이니까 새 화면으로 …
굿하트의 법칙, 클릭률을 올렸는데 왜 유지율이 떨어질까
약 8분
이번 실험은 완승이었다. 새 썸네일과 제목 스타일을 붙인 목록 화면이 기존보다 클릭률(click-through rate)을 20% 끌어올렸다. 대시보드의 막대가 시원하게 솟았고, …
디자인 크리틱: 감상평이 아니라 비평을 하는 법
약 7분
시안을 올렸다. 잠깐의 침묵 뒤에 돌아온 피드백은 이거였다. “음… 뭔가 좀 아쉬운데.” 뭐가 아쉬운지, 어디를 어떻게 고치라는 건지는 없다. 그냥 아쉽다. 다들 고개를 끄덕이고 …
멀티암드 밴딧, 지는 변형에 트래픽을 덜 태우는 실험
약 10분
배너 문구 세 개를 놓고 A/B 테스트를 돌린다고 하자. A안, B안, C안. 트래픽을 3분의 1씩 균등하게 나눠서 2주를 돌린다. 그리고 3일쯤 지나면 대략 감이 온다. C안 전 …
모션 디자인 원칙: easing과 duration을 정하는 기준
약 7분
모달이 하나 뜬다. 그런데 뭔가 답답하다. 화면 아래에서 부드럽게 올라오는 게 아니라, 일정한 속도로 쓱 올라와서 딱 멈춘다. 색도 깔끔하고 여백도 잘 잡혀 있는데, 이상하게 싼 …
빈 화면 디자인: 아무것도 없을 때가 진짜 승부
약 7분
앱을 처음 켠다. 회색 배경 한가운데에 흐릿한 아이콘 하나, 그 아래 작은 글씨로 “데이터가 없습니다”. 끝이다. 여기서 무엇을 해야 하는지, …
새 디자인 첫 주 지표가 튀는 이유, 노벨티 효과와 변화 저항
약 8분
새 디자인을 켠 지 사흘째. 대시보드에 우상향 곡선이 그려진다. 전환율이 평소 12%에서 15%로 뛰었다. 팀 채널에 샴페인 이모지가 올라온다. 누군가 이렇게 적는다: “ …
이 실험 며칠 돌려야 하나: A/B 테스트 표본 크기와 검정력
약 9분
실험 세팅이 끝났다. 새 결제 버튼 디자인을 만들었고, 기존 버튼과 절반씩 나눠 보여주기로 했다. 트래킹도 붙였다. 다 준비됐는데, 릴리스 직전에 PM이 묻는다. PM: “이거 며 …
전체는 무승부인데 왜 모바일만 올랐을까
약 8분
실험 결과 회의를 떠올려 보자. 화면에 막대 두 개가 나란히 서 있다. 팀원: “이번 온보딩 실험, 전체 전환율은 무승부다. 대조군 5.5%, 처치군 5.5%. 차이 없음.” 디자 …
차트는 어떻게 정직하게 거짓말하는가: 지각 인코딩의 위계
약 11분
대시보드 리뷰 회의를 떠올려보자. 디자이너가 밤새 다듬은 화면이 스크린에 뜬다. 매출 구성비를 보여주는 도넛 차트가 곱게 자리 잡았고, 색은 브랜드 팔레트에 딱 맞게 떨어진다. 그 …
1/11한글 웹 타이포그래피 (1) 서구 규칙을 그대로 쓰면 안 되는 이유
약 7분
디자인 시스템 문서를 새로 정리하던 날이었다. 본문 타이포를 어떻게 잡을지 정하려고 유명한 영문 가이드들을 펼쳤다. 한 줄은 66자, 행간(line-height)은 1.5, 본문 …
2/11한글 웹 타이포그래피 (2) 명조와 고딕, 화면에서 무엇을 언제
약 8분
한글로 본문을 조판할 때 거의 매번 처음 걸리는 갈림길이 있다. 명조로 갈까, 고딕으로 갈까. 이 시리즈의 첫 글에서 나는 서구의 본문 규칙을 한글에 그대로 옮기면 어긋난다는 이야 …
3/11한글 웹 타이포그래피 (3) 글자 크기와 굵기, 그리고 본문 대비
약 7분
이 시리즈에서 나는 서구 규칙을 한글에 그대로 붙이면 왜 어긋나는지 계속 따져왔다. 1편에서 한글의 네모틀과 획밀도를 이야기했고, 2편에서 본문은 고딕을 기본으로 쓰자고 정리했다. …
4/11한글 웹 타이포그래피 (4) 글 길이와 줄끝 처리
약 8분
앞 세 편에서 서체와 글자 크기, 굵기, 대비까지 정했다. 본문은 고딕 17px, 대비는 4.5:1 이상. 이제 그 글자를 한 줄에 몇 개까지 늘어놓을지, 그리고 그 줄을 어디서 …
5/11한글 웹 타이포그래피 (5) 자간·행간과 문단 간격
약 8분
4편에서 한 줄에 몇 자를 담을지(measure)를 정했다. 한글 약 40자, 본문 폭 680px. 줄의 가로 폭이 정해졌으니 이제 남은 건 글자와 글자 사이, 줄과 줄 사이, 문 …
6/11한글 웹 타이포그래피 (6) 위계와 타입스케일: 본문에서 값을 뽑아 조립하기
약 9분
다섯 편을 걸어왔다. 1편에서 서구의 66자·1.5·16px가 한글에 왜 안 맞는지 짚었고, 2편에서 본문 서체를 고딕으로 정했다. 3편에서 크기 17px과 굵기, 대비를 못박고, …
7/11한글 웹 타이포그래피 (7) 웹폰트 로딩과 성능
약 8분
6편에서 값은 다 나왔다. 서체, 크기, 굵기, 행간, 자간, measure, 줄끝, 문단 간격, 대비까지 하나의 CSS 변수 블록으로 조립했고, 그걸 복붙하면 한글 본문 조판은 …
3/3쉬운 확률 (3) 기댓값, 평균적으로 얼마
약 8분
동생이 복권 한 장을 앞에 두고 한참을 고민해. 동생: “이거 살까? 되기만 하면 인생 역전이라는데.” 누나: “계속 사면 이득인지 손해인지부터 따져보고 사.”
2/3쉬운 확률 (2) 정보가 바뀌면 확률이 바뀐다
약 8분
양성 나왔다는 문자 한 통에 머릿속이 벌써 병 확정으로 굴러간 적 있지? 그 공포부터 풀고 가자. 그 상황, 확률을 알면 생각보다 훨씬 덜 무섭다. …
1/3쉬운 확률 (1) 확률은 유리한 경우를 전체로 나눈 것
약 7분
주사위를 손에 쥐고 던지기 직전, 6이 나올까 안 나올까. 그 찜찜하고 안 풀리는 기분 알지? 확률은 원래 그 찜찜함, …
3/3쉬운 삼각함수 (3) 회전을 옆에서 보면 파동이다
약 6분
바다에서 넘실대는 파도, 잔잔한 호수에 돌을 던지면 동그랗게 퍼지는 물결, 스피커에서 흘러나오는 소리. 이것들이 사실 다 같은 모양을 하고 있어. 오르락내리락 규칙적으로 출렁이는 …
2/3쉬운 삼각함수 (2) 단위원, 90도 너머로
약 7분
직각삼각형으로 각을 잰다는 건, 뒤집어 보면 좀 답답한 얘기야. 삼각형이 그려지는 각까지만 된다는 뜻이거든. 각이 0도에서 90도 사이여야 직각삼각형이 만들어지잖아. 그럼 120도 …
1/3쉬운 삼각함수 (1) 삼각비, 각 하나로 정해지는 변의 비율
약 7분
마당에 선 큰 나무 한 그루. 저 꼭대기까지 높이가 얼마냐고 물으면 뭘 어떻게 할래? 사다리? 꼭대기까지 안 닿아. 산이나 피라미드는 더 말할 것도 없지. 줄자를 위까지 들고 갈 …
4/4쉬운 벡터 (4) 기저와 선형결합, 벡터로 공간을 짓다
약 6분
네가 매일 쓰는 좌표 (3, 2), 사실 네 생각과 다른 거였어. 그냥 점 하나 콕 찍은 자리라고 여겼겠지? 아니야. (3, 2)는 기준 화살표 둘을 각각 3배, 2배로 늘여서 더 …
3/4쉬운 벡터 (3) 내적, 두 화살표가 얼마나 같은 방향인가
약 6분
두 힘이 얼마나 같은 방향을 보는지, 그건 어떻게 하나의 수로 잴까? 상자를 미는 두 손이 서로 얼마나 손발이 맞는지, 화살표 둘이 같은 쪽을 겨누는지 어긋나는지, 이걸 숫자 하나 …
2/4쉬운 벡터 (2) 벡터 더하기, 화살표를 이어 붙이기
약 6분
지난 편에서 벡터는 크기와 방향을 가진 화살표라고 했어. 기억 안 나도 괜찮아. 화살표 하나, 그게 벡터였다. 오늘 출발엔 그거면 충분해. 그런데 화살표 두 개를 더하면 재밌는 일 …
1/4쉬운 벡터 (1) 벡터는 크기와 방향을 가진 화살표다
약 5분
지도 앱을 켜고 여기서 저기까지 가는 길을 떠올려 봐. 화면에 뜨는 건 딱 두 가지야. 어느 쪽으로 갈지(방향), 그리고 얼마나 갈지(거리). 이 방향과 거리를 한 몸에 담아 쭉 …
디자인 토큰 3계층: primitive, semantic, component
약 15분
버튼 하나에 파란 배경을 넣는다. CSS를 열고 background: #1E46A0이라고 적는다. 화면에서는 완벽하게 잘 나온다. 문제될 게 없어 보인다. 몇 달 뒤 다크모드를 붙 …
선형대수 이야기: 행렬은 공간을 바꾸는 동사다
약 8분
행렬은 숫자표가 아니다. 공간을 바꾸는 동사다. 선형대수의 기본은 사실 이 선언 하나에서 다 풀려 나와. 대학에서 행렬을 네모난 숫자 덩어리로 외우다 지쳤다면, 그건 네 탓이 아니 …
전주의적 처리: 아이콘 그리드가 리스트보다 느린 이유
약 9분
설정 화면에 아이콘 버튼을 열여섯 개쯤 격자로 깔았다. 계정, 알림, 결제, 보안, 언어, 테마, 접근성… 각 칸에 예쁜 라인 아이콘 하나씩. 정갈해 보인다. 그런데 사용성 테스트 …
3/3쉬운 미분 (3) 기울기가 알려주는 것
약 5분
기울기 하나로 어디가 꼭대기인지 안다. 허풍 같지? 근데 진짜다. 그래프를 눈으로 훑지 않아도, 높이를 일일이 재보지 않아도, 기울기 부호 하나로 언제 오르막이고 언제 내리막인지, …
2/3쉬운 미분 (2) 미분은 그 순간의 기울기다
약 5분
곧은 직선이라면 기울기가 뻔하다. 오른쪽으로 갈수록 얼마나 가파른가, 그거면 끝이니까. 그런데 휘어진 곡선의 딱 한 점, 거기엔 무슨 기울기가 있어? 점 하나엔 오르막도 내리막도 …
1/3쉬운 미분 (1) 미분은 순간의 빠르기다
약 6분
자동차 뒷자리, 고속도로를 달리는 중이다. 동생: “누나, 우리 지금 얼마나 빨라?” 누나: “부산까지 400킬로미터를 4시간에 가니까, 평균 시속 100.”
브레이크포인트 없는 반응형: 컨테이너 쿼리, clamp, 내재적 디자인
약 15분
카드 컴포넌트를 하나 만들었다고 하자. 썸네일이 위, 제목과 설명이 아래로 쌓인 세로 카드다. 이 카드를 본문 그리드에 넣으면 폭이 넉넉하니 썸네일을 왼쪽, 텍스트를 오른쪽으로 눕 …
3/3쉬운 부정적분 (3) 부정적분으로 넓이를 구한다
약 5분
넓이 하나 구하겠다고 얇은 조각으로 수백 번을 잘라 더해야 한다면, 좀 지치지 않아? 그걸 빼기 한 번으로 끝낼 수 있다면 어떨까. 이번 편이 바로 그 지름길이야. 부정적분 시리즈 …
2/3쉬운 부정적분 (2) 왜 +C가 따라붙나
약 6분
답이 하나일 것 같지? 계산 문제니까 딱 떨어지는 정답 하나가 나올 것 같잖아. 그런데 부정적분은 답이 무한개야. 하나도 아니고 무한개. 이 말이 이상하게 들리면 제대로 온 거다. …
1/3쉬운 부정적분 (1) 미분을 거꾸로 되짚기
약 6분
부정적분? 하는 일은 딱 하나야. 미분을 거꾸로 되감는 거. 오늘은 이 선언 하나만 손에 쥐면 나머지는 다 딸려 온다. 무슨 대단한 새 기술이 아니라, …
접근성의 진짜 난이도: 대비 말고 포커스 관리
약 17분
접근성 점검을 자동화 도구에 맡기면 리포트가 깔끔하게 나온다. 대비가 4.5:1을 넘겼는지, 이미지에 alt가 붙었는지, 페이지에 랜드마크(landmark)와 헤딩 구조가 있는지. …
3/3쉬운 정적분 (3) 쌓기와 변화는 서로 반대다
약 5분
저금통 하나 떠올려봐. 매일 동전이든 지폐든 한 줌씩 넣어 온 그 통. 넣을 땐 그날 얼마 넣는지만 보이는데, 어느 날 흔들어보면 제법 묵직하지. 여기 두 가지가 있어. 날마다 넣 …
2/3쉬운 정적분 (2) 잘게 자를수록 정확해진다
약 6분
미리 하나 말해둘게. 오늘 극한이라는 말이 나온다. 이 말에 데인 사람 많은 거 안다. 근데 겁먹지 마. 극한은 무슨 어려운 기호가 아니라, 끝없이 잘게 자르면 어떻게 되나 지켜보 …
1/3쉬운 정적분 (1) 울퉁불퉁한 땅은 잘게 잘라 잰다
약 6분
운동장처럼 반듯한 네모 땅은 넓이 구하기가 쉽다. 가로에 세로를 곱하면 끝이니까. 가로 50미터, 세로 30미터면 1500제곱미터, 곱셈 한 번에 답이 나온다. 여기까진 초등학교 …
컴포넌트 API 설계: 불린의 함정
약 15분
디자인 시스템을 쓰는 일과 설계하는 일은 다르다. 쓰는 쪽은 <Button>을 불러와 화면에 얹으면 끝이다. 설계하는 쪽은 그 <Button>이 어떤 props를 받을지, 어떤 조 …
'그리고'는 곱하고 '또는'은 더한다: 확률의 두 기본 규칙
약 11분
회원가입 퍼널을 새로 짰다고 하자. 첫 화면을 넘는 사람이 60%, 거기서 다음 화면까지 또 50%. 그럼 두 화면을 다 넘는 사람은 몇 퍼센트일까? 얼른 60 더하기 50 …
로그가 곱셈을 덧셈으로 바꾸는 이유
약 9분
밤이 깊었는데 천문학자는 책상을 못 뜬다. 별의 자리를 맞추려면 자릿수가 여럿인 수를 몇 번이고 곱해야 하는데, 손으로 하는 곱셈은 한 줄 한 줄이 다 고비거든. …
나누기의 두 가지 뜻: 나눠 갖기와 덜어 담기
약 10분
나누기? 초등학교 때 다 뗐지. 그래서 시시하다고? 그럼 하나만 물어보자. 나누기에 뜻이 둘인 거 알아? 몰랐지. 근데 네 탓 아니야. 학교에서 계산하는 법만 가르치고, 그 안에 …
카이제곱 검정, 설문 데이터에서 차이가 진짜인지 보는 법
약 10분
설문 결과를 받았다. “20대 여성의 만족도가 남성보다 5%p 높다.” 디자인 보고서에 그렇게 적었다. 회의에서 한 줄 인용된다. “여성 만족도가 더 높다니까요.” 그 한 줄이 신 …
마이크로인터랙션이 UI의 절반을 결정한다
약 17분
버튼을 누른다. 그러면 0.1초 안에 색이 살짝 어두워지거나, 화면이 살짝 가라앉거나, 손끝에 작은 진동이 닿는다. 이 0.1초를 우리는 거의 의식하지 않는다. 그런데 이 0.1초 …
심슨의 역설, 평균은 거짓말을 한다
약 9분
분기 회의를 떠올려 보자. 화면 왼쪽에 막대가 하나 서 있다. “이번 분기 전환률 5.2%에서 5.9%로 올랐다. 신규 디자인 효과.” 누군가 묻는다. “근데 모바일은요?” …
계획 오류: 우리는 왜 항상 일정을 맞추지 못할까
약 5분
오늘 아침에 세운 계획을 떠올려보자. 오전에는 글을 쓰고, 오후에는 밀린 코드를 정리한 뒤 저녁에는 운동을 가려 했을 것이다. 현실은 다르다. 오전 내내 쏟아지는 이메일과 메신저 …
도박사의 오류, 독립 사건의 착각
약 7분
주변에서 한 번쯤은 들어봤을 이야기다. 동전을 다섯 번 연속 던졌더니 앞면만 나왔다. 여섯 번째에 친구가 이제 뒷면 나올 차례라고 의기양양하게 거는 장면. 룰렛 테이블에서 검정이 …
디자이너에게 필요한 것
약 2분
디자이너에게 가장 필요한 태도가 뭐냐고 물으면, 나는 늘 같은 답을 한다. 논리적 사고라는 답이다. 근거를 파악하고, 맥락을 읽고, 결정을 내리고, 그 결정을 설득하는 것. …
시각보정: 디자인이 숫자를 배신할 때
약 3분
피그마를 쓰다 보면 한 번씩 이런 순간이 온다. 분명히 수평·수직 중앙 정렬을 눌렀는데, 아이콘이 왼쪽으로 쏠려 보인다. 사각형과 원을 나란히 놓고 같은 크기로 맞췄는데, …
인과관계 vs 상관관계, 디자인 의사결정의 안전장치
약 8분
디자인을 바꿨다. 한 달 후 페이지뷰가 올랐다. 디자인이 잘 됐나 보다, 우리 팀이 잘한 거다. 보고서에 그렇게 적었다. 그런데 며칠 뒤 의문이 생겼다. …
표준편차, 평균만으로는 부족한 이유
약 13분
통계 이야기를 시작하면 대부분 평균부터 나온다. 학교에서, 뉴스에서, 업무 보고서에서 우리는 늘 평균을 본다. 이번 달 평균 매출, 평균 응답 시간, 우리 반 평균 점수. 숫자 하 …
확증 편향, 이미 믿은 것을 증명하는 착각
약 11분
어느 날 문득 깨닫는 순간이 있다. 세상 일이 내 생각을 너무 잘 뒷받침해준다는 걸. SNS 피드도 그렇고, 뉴스 헤드라인도 그렇고, 주위 사람들의 말도 다 어느 방향을 향해 있 …
디자이너는 전주기를 본다
약 3분
나는 좋은 디자이너의 조건을 다음과 같이 본다. 한 영역에서 압도적인 재능을 가진 사람보다, 전 영역에서 고루 80점 이상을 줄 수 있는 사람. 왜 이렇게 보게 됐는지, 어떤 의미 …
좋은 디자인, 가성비 좋은 디자인
약 1분
단순히 User flow를 만들 수 있는 단계를 지나, 좋은 User flow를 만드는 것까지 가고 싶다면 디자인 시스템이나 컴포넌트 재활용에서 벗어나서 생각해야 한다. 벗어나기 …
R_in = max(0, R_out - d)
약 1분
중첩된 border-radius는 아래 식으로 잡을 때 시각적으로 가장 안정적인 경우가 많다. 그러나 이 공식도 모든 상황에 딱 맞는 만능키는 아니라서, …
요구사항 파악과 최소 구현에 대한 짧은 세미나
약 1분
개발팀의 거의 절반이 디자이너인 환경, 제품에 프로덕트 디자이너가 많은 영향을 끼치는 환경에서 일하면서, 늘 요구사항 파악과 구체화, 리소스를 고려한 가장 작은 구현은 무엇인지 고 …
2025년의 2/3을 보내며
약 1분
2025년의 2/3쯤이 됐다. 디자인을 하면서 한 가지 헷갈리는 게 있다. 이렇게 만들어야 한다, 저렇게 만들어야 한다. 디자이너는 이래야 한다 아니다, 디자이너는 저래야 한다. …
사진기의 등장과 화가들의 절망
약 4분
사물을 똑같이 그린 그림을 보고 우리는 이렇게 말한다. “이거 아주 사진 같은 그림이구만.” 이 말은 많은 의미를 담고 있다. 사진기의 사진은 대상을 그대로 재현한다. 아무리 똑같 …
구조화: 논리적인 사고의 첫걸음.
약 3분
예전에 교수님이 하신 말씀이 기억난다. “너희들은 구조적, 구조적인, 구조적으로 이런 말들을 자주 하는데 구조적이라는 게 무슨 말인지 정확히 아는 사람은 별로 없어 보인다.”
Css in depth와 Debugging Css 후기
약 2분
CSS는 디자이너를 위한 언어라고 생각하고 있다. 처음에 CSS를 배울 때도, 계속 공부하고 있는 지금도 이 생각은 변하지 않고 있다. 이 생각에는 여러 이유가 있는데, 가장 큰 …
어떨 때 어떤 통계를 써야 할까?
약 2분
통계를 사용하기 전에 알아야 할 것이 어떨 때, 어떤 통계를 사용해야 하는지에 관한 것이다. 사실 매우 간단한 것이기 때문에 알아두면 분명히 도움이 된다. 가장 큰 기준은 ‘표본 …
통계, 분포에 대해 알기 전에
약 3분
분포에 대해 알기 전에 모집단과 표본집단의 개념에 대해 알아야 한다. 모집단이란 전체 인구를 말하는 것이고 표본집단은 조사를 위해 선정된 적은 수의 참여자, 즉 샘플을 말하는 것이 …
통계, ANOVA에 대해 알아보자(R)
약 2분
주의: 이 포스팅은 분산분석을 계산해내기 위한 복잡한 공식을 설명하지 않는다. 개념과 R에서 사용하기 위한 방법만 설명한다. t-test는 독립변수가 하나이고 표본이 2개일 때 한 …
통계, paired t-test에 대해 알아보자(R)
약 4분
t-test는 표본이 독립적인 경우에만 사용이 가능하다. 표본이 독립적이라는 말은 표본에 관측치가 다른 표본에 의해서 영향을 받지 않는 경우를 말한다. 예를 들어보자, 특정 앱 시 …
통계, 기본 개념을 정리해보자.
약 4분
이 포스트에서는 유의수준과 p-value(유의확률)이 무엇인지, 그 전에 귀무가설과 대립가설, 1종오류와 2종오류가 무엇인지 등을 정리한다. 귀무가설과 대립가설의 예를 들어보자. …
통계, t-test에 대해 알아보자(R)
약 7분
디자이너들이 논문을 적을 때 가장 어려워하는 부분이 통계이다. 귀무가설이란 무엇인지, 통계적으로 유의미함은 무엇인지, t-test는 무엇인지, Anova는 무엇인지 등등… 어려운 …
폰트 단위: em, rem(root em)
약 4분
시각디자인에서 타이포그래피는 매우 중요한 요소이다. 많은 구루 디자이너들이 자간, 행간, 글자 크기 등을 매우 세심하게 다룬다. 이는 디지털 환경에서도 마찬가지이다. 시각적 위계, …
경험이란 무엇인가(1)?
약 4분
The central difficulty is that exprience is not an explanatory posit but an explanandum in its own …
4/4디자이너를 위한 프레이머(4)
Outdated
약 1분
UX와 스토리텔링 - Facebook을 중심으로
Outdated
약 9분
Donna Lichaw는 그녀의 저서『The User's Journey』에서 다음과 같이 말했다. "Story is one of the powerful tools that …
3/4디자이너를 위한 프레이머(3)
Outdated
약 1분
2/4디자이너를 위한 프레이머(2)
Outdated
약 1분
![[머티리얼 디자인] Layout 이해하기](/posts/material-design-understanding-layout/thumbnail_hu_b1a990a8c7f8022.webp)
2/2[머티리얼 디자인] Layout 이해하기
Outdated
약 3분
Material Design에서 px이 아니라 dp를 이용한다는 것을 이전 포스팅을 통해 알아보았다. 다만 유의할 점은 이제 160 dpi 스마트폰은 거의 나오지 않는다는 점이다. …
1/4디자이너를 위한 프레이머 (1)
Outdated
약 1분
![[머티리얼 디자인] DP 이해하기](/posts/material-design-understanding-dp/thumbnail_hu_7d214a7c714c070a.webp)
1/2[머티리얼 디자인] DP 이해하기
Outdated
약 5분
포스트 이미지 출처 : www.androidcentral.com 안드로이드 앱을 디자인할 때 필수적으로 고려해야 할 요소가 있다. 바로 DP다. 대부분 픽셀이나 포인트 개념만 사용 …
4/4Dive Into UX(3) - Prototyping
Outdated
약 5분
이번 연초에 동계 HCI학회에 참석했었다. 국내 유수의 대학들과 기업들의 부스 전시들도 기억에 남았지만 가장 기억에 남았던 것은 Scott 교수의 강연이었다. 그 이유는 여러 가지 …
2/4Dive into UX (1) - UX란?
Outdated
약 5분
본 포스팅은 Elizabeth Rosenzweig의 SUCCESSFUL USER EXPERIENCE에서 발췌한 내용이 많이 포함되어 있다. UX란 무엇일까? 사전적 의미로 UX …
3/4Dive into UX(2) - Lean UX의 등장
Outdated
약 6분
근래 유명한 용어가 있다. 바로 LEAN과 AGILE이다. LEAN과 AGILE? 그게 뭐지 하는 분도 있을 것이고 “아~ 그래 그거~“하시는 분도 있을 것이다. LEAN은 날씬 …
1/4Dive into UX(0) - UX? UI? HCI?
Outdated
약 4분
https://youtu.be/h0lB0L1taU8 https://www.youtube.com/embed/h0lB0L1taU8 HCI는 Human Computer …