Blog

안 쓰는 제품의 진짜 문제 Opus 4.6 출시와 함께 만들어본 개인용 가계부 웹 앱이 있다. 영수증 사진을 찍어 보내면 AI가 알아서 분류해주고, 텔레그램으로 "오늘 스타벅스 5,200원"이라고 말하면 거래로 등록되는 구조. 만들 때는 "와, 이제 가계부 입력이 진짜 쉬워졌네" 싶었는데 — 그런데 막상 만들고 나서 내가 잘 안쓰게 되었다. 이유는 간단...

Photos.app에 12만 장 가까이 쌓여 있는 사진을 사이트의 /photos 메뉴로 옮기는 일을 어떻게 줄일까. 매일 찍는 일상 사진 중에서 "기억하고 싶은 이벤트"만 자동으로 골라낼 수 있다면 — 만 장 단위 큐레이션이 한 시간 단위로 줄어들 것이다. 이걸 한 번 만들어봤다. 그리고 한 시간 만에 폐기했다. 문제 정의 내 사이트의 /photos는...

며칠 전에 홈을 디렉토리 형태로 다시 만들었다(/blog/kimtoma-home-renewal). 그 이후 며칠 동안 더 다듬었다. dual view 토글, iMessage 모양 말풍선, hover 시 주변 텍스트가 자연스럽게 흐려지는 immersive 효과, bento 캔버스에 추가된 라이브 위젯들. 그리고 도중에 한번 진짜 pretext 같은 dynam...

3D 카드 떠다니는 홈을 한 컬럼 디렉토리 형태로 다시 만들었다. NOW.LOG 자리에 Strava 마지막 활동, Spotify 지금 듣는 곡(인라인 플레이어 포함), Obsidian에서 매시간 동기화되는 마크다운까지 라이브로 붙였다. 만드는 며칠 동안 마주친 디버깅 포인트들이 꽤 흥미로워서 정리해둔다. 왜 다시 만들었나 기존 홈은 3D bento c...

예준이 돌잔치 초대장을 AI랑 같이 하루 만에 사이트로 만들었음. 그냥 예쁜 시안 하나 만든 게 아니라 실제로 사진 붙이고, 모바일/폴드/데스크탑 대응하고, 갤러리 라이트박스까지 붙여서 배포까지 끝낸 기록. 왜 이걸 적어두나 가족 행사 초대장은 생각보다 손이 많이 간다. - 어르신들도 보기 쉽게 글자가 커야 함 - 모바일에서 바로 잘 보여야 함 -...

$69짜리 초소형 이잉크 리더기 Xteink X4를 알리익스프레스에서 구매했습니다. 한국어를 공식 지원하지 않는 기기에 한글 펌웨어를 올리고, 리디에서 구매한 책을 DRM 해제해서 EPUB으로 읽기까지의 과정을 정리합니다. Xteink X4, 왜 샀나 요즘 이잉크 리더기가 다시 관심을 받고 있습니다. 킨들이나 리디페이퍼 같은 메이저 기기도 있지만, 저...

AI 벤치마크 점수는 급상승하고 있지만, 대부분의 사람들은 이 변화를 체감하지 못하고 있습니다. METR의 공식 벤치마크 데이터를 기반으로, AI의 실제 능력과 대중의 인식 사이의 격차를 인터랙티브 차트로 시각화했습니다. 전체 화면으로 보기 >>(/ai-perception-gap/index.html) 주요 발견 1. METR 벤치마크에서 AI가 보...

404 페이지는 사용자가 잘못된 URL에 접근했을 때 보게 되는 화면입니다. 보통은 단순한 에러 메시지만 표시하지만, 이번에 kimtoma.com의 404 페이지를 재미있는 인터랙티브 경험으로 바꿔보았습니다. 완성된 모습 !404 페이지 데모(/media/2026/02/404-page-demo.gif) - 프로필 이미지가 화면을 돌아다니며 벽에 튕김...

포트폴리오 사이트에 내가 매일 쓰는 기기와 도구를 기록하는 Things 섹션을 새로 만들었습니다. 페이지 설계, 카테고리 필터, 마크다운 기반 콘텐츠 관리, 이미지 파이프라인까지 — 하루 동안 5번의 커밋으로 완성한 과정을 정리합니다. 왜 Things 페이지를 만들었나 블로그와 프로젝트 외에 "내가 실제로 쓰는 것들"을 기록하고 싶었습니다. 장비를 바...

최근 kimtoma.com 포트폴리오 사이트의 홈 화면을 대폭 개선했습니다. 시계 위젯의 디테일을 다듬고, 모바일 환경에서의 사용성을 크게 향상시켰습니다. 시계 위젯 개선 연속 회전 초침 기존에는 초침이 60초에 도달하면 0초로 되돌아가면서 부자연스러운 움직임을 보였습니다. 이를 개선하여 초침이 계속 한 방향으로 부드럽게 회전하도록 수정했습니다....

모바일 O/S 별 버전 점유율 확인해보자. (2023년) iOS 버전 점유율 iPhone mermaid pie title 지난 4년 동안 도입된 iPhone 디바이스 "iOS 16" : 90 "iOS 15" : 8 "이전 버전" : 2 iPad mermaid pie title 지난 4년 동안 도입된 iPad 디바이스 "iPadOS 16"...

팬톤, 가트너, 트렌드코리아가 발표한 2022 트렌드 키워드입니다. :-) !img(https://kimtoma.com/media/2022/01/2022-color-of-the-year.jpg) 팬톤 올해의 컬러(http://www.pantone.kr/ColoroftheYear2022.html) - PANTONE 17-3938 Very Peri !...

2021년이 끝날 무렵, 올 한해 있었던 다양한 일들을 짧게 회고해봅니다. :-) 🏢 사내 팀 이동함 (디자인팀 → 기획팀) - 3월 Biz실 실장님과 기획/디자인 팀장님의 권유로 기획팀으로 부서 이동함 - 더 많은 영역을 커버할 수 있고 추상적인 앞단으로 갈 수 있을거라는 예상(?)을 가지고 있었기 때문에 이동함 - 6월 ~ 10월 리텐션을 위한...

> 디지털 세계에서 사용되는 사용자 인터페이스 중 스위치에 대한 모든 것을 알아봅시다. 스위치 UI의 역사 !history-of-button(/media/2021/09/history-of-switches.png) - 아날로그 스위치 → 디지털 스위치 - 아날로그 세계에서는 전기의 흐름을 제어하는 데 주로 사용 되는 스위치로 전등을 켜고 끌 때 사용하...

> 디지털 세계에서 사용되는 사용자 인터페이스 중 버튼에 대한 모든 것을 알아봅시다. 버튼 UI의 역사 !history-of-button(/media/2021/02/history-of-button.png) - 아날로그 버튼 → 디지털 버튼 - 디지털 버튼의 변천사 Pixel > Aqua > Skeuomorphism > Ghost > Flat > Ma...

> 국제 표준(ISO 8601)을 지켜서 표기하는 것이 가장 좋으나, 서비스 기획 의도와 최종 디자인에 따라 가변적으로 구성할 수 있음 1. 상대시간 (Relative Time) !date-and-time(/media/2021/01/date-and-time.png) - 주로 사용자가 작성하거나 참여한 콘텐츠에 사용 - 콘텐츠를 최신 순으로 보여주는...

2020년이 끝날 무렵, 올 한해 있었던 다양한 일들을 짧게 회고해봅니다. :-) 🏢 회사 이직함 (HNINE(https://hnine.com/) → NCSOFT(https://kr.ncsoft.com/kr/index.do)) - 2019년 상반기 회고 이후에 결심하고 12월부터 준비해서 올해 3월에 NC소프트로 이직함 - 포트폴리오를 만들다가 막힐...

팬톤, 가트너, 트렌드코리아가 발표한 2021 트렌드 키워드입니다. :-) !img(https://kimtoma.com/media/2020/12/pantone-color-of-the-year-2021.png) 팬톤 올해의 컬러(http://www.pantone.kr/ColoroftheYear2021.html) 재설정, 갱신, 재창조 등 우리에게 필요...

모바일 O/S 별 버전 점유율 확인해보자. iOS 버전 점유율 !img(/media/2020/09/ios-and-ipados-usage.png) iOS 버전별 점유율 (2020/9/22 기준) - 아이폰은 iOS 13이 압도적인 비율(92%)로 점유 있고, iOS 12가 7%, 기타 나머지는 2% 차지 - 해당 데이터는 2020/6/17 기준으로...

이동 중에 한 손으로 모바일 앱을 사용하는 사람들의 맥락(context)을 고려해서 디자인해보아요. 모바일 앱은 대부분 이동 중에 한 손으로 스마트폰을 쥔 상태로 사용하게 되는데 나를 비롯해 많은 디자이너들이 이런 맥락(context)을 고려하기 보다 정지되어 있는 모니터 상의 화면을 아름답게(aesthetic) 배치하는 작업에 더 익숙해져 있다. 하지...

Sketch로 UI 디자인 작업을 하고 있다면 Stark 플러그인을 써서 명도대비를 체크해서 컨텐츠 접근성을 높여보아요. 디지털 디바이스를 통해 제공하는 컨텐츠는 다양한 사용자가 접근하기 쉽고 편하게 볼 수 있도록 웹 컨텐츠 접근성 가이드라인(WCAG(https://www.w3.org/TR/WCAG21/contrast-minimum)) 기준에 맞춰 UI...

혼자서 하는 프로젝트가 아니라면 프로젝트 종료 후에 간단 회고를 해보아요. 혼자서 프로젝트를 하지 않고, 협업해서 프로젝트를 진행하는 실무자와 이해관계자들은 누구나 가슴속에 각자 맺힌 말 못한 응어리와 좋았는데 표현하거나 칭찬하지 못한 부분들이 생기게 마련이다… > 그래서 해보자. 프로젝트 간단 회고! !(/media/2020/02/112bf-12ee...

2020년에는 더 많이 덜어내는 한 해가 되기를 바라면서… !img(/media/2019/11/kondo-marie.jpg) 2019년, 나는 버리기에 푹 빠져있다. 물론 버리는 즐거움(http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791155424...

Abstract는 스케치 파일로 작업할 경우 버전 관리 및 협업을 하기 위해 사용하는 유료 서비스입니다. !img(/media/2019/10/icon-abstact.png) Abstract(https://www.abstract.com/)는 스케치 파일로 작업할 경우 버전 관리 및 협업을 하기 위해 사용하는 유료 서비스입니다. (월 결제시 1인당 10$)...

아틀라시안의 이슈관리용 S/W인 Jira의 사용법을 간단하게 야매로 정리해봤습니다. !img(/media/2019/10/icon-jira.png) Jira(https://www.atlassian.com/software/jira)는 Atlassiand에서 만든 일정과 Issue를 관리하는 협업용 S/W입니다. 정석은 아니고 속성으로 배운 Jira 사용법을...

디지털 디바이스에서 버튼의 크기는 어떻게 정하는게 좋을지에 대한 물음에서 부터 시작된 간단한 리서치 1. 터치 입력 시 상호작용 가능한 버튼의 최소 크기는? NN group(https://www.nngroup.com/articles/touch-target-size/) : 1 x 1cm Apple(https://developer.apple.com/de...

다국어 대응을 위해서 애플리케이션에 사용되는 문구를 국가별로 관리하는 산출물인 스트링 테이블에 대해 간단히 알아보자. String Table이란? - 다국어 대응을 위해서 국가별로 애플리케이션에 사용되는 문구를 관리하는 산출물 - 보통 스프레드시트 형식으로 제작 (xlsx, csv) Key 값 (ID) - 영문 대문자와 언더스코어(_)로만 작성 -...

일 잘하는 팀(조직)이 어떻게 일하면 좋을지 개인의 생각을 한 번 정리해봅니다. > “뛰어난 팀은 팀원간에 개인적인 관심 + 업무에 대한 솔직한 피드백을 서로 자유롭게 줄 수 있어야 함” 업무 원칙 1. 위급하거나 중대한 이슈가 아닌 경우 야근이나 특근 지양하기 → 개인 건강 및 번아웃 예방하기 2. 자율적이고 탄력적인 근무시간 존중하기 →...

Cbisights가 제시하는 2019년 테크트렌드 요약 1. The hyper-personalization of everything 단순 구매기록이나 쿠키정보를 활용한 개인화에 DNA, 심장박동 등 더많은 정보를 이용하는 개인화로 확장 2. The smart home targets the senior citizen market 10년전에 비해 최신...

프랜시스 베이컨이 200년뒤에 UX 디자이너들에게 해주고 싶었던 말 항상 허기진 주말, 점심을 먹기 위해 주차를 하려는데 주차장소가 마땅하지 않아서, 교보문고 건물에 주차하고 점심을 먹었다. 점심을 먹고 나서 주차비 내기 아까워진 마음에 차라리 책을 사고 무료주차를 하자고 교보문고에 들어가서 산 책이 바로 “철학의 이단자들”이었다. PPL 아님… (교보문...

관심없는 분들도 계실테니, 결론부터 말하자면 “해외 주식 투자”에 대한 짧은 글이다. 해외주식 투자를 처음 시작하게 된 건 2017년 5월, 한창 암호화폐 투자 광풍이 불어오던 시기였다. 사실 투자라기 보다는 단순히 브랜드에 대한 ~~빠심~~ 팬심때문에 시작했다. 눈에 보이지 않는 시장에도 이렇게 투자를 하는데 실제로 눈에 보이고 내가 열심히 사용하고...

Honey Miner 프로그램으로 쉽게 Bitcoin을 채굴하는 방법을 알려드립니다. Windows가 설치된 PC에서 누구나 쉽게(?) 비트코인을 채굴할 수 있는 Honey Miner(https://honeyminer.com/referred/599h0)를 사용한 후기를 공유해드려요. !스크린샷 2018-07-31 오후 7.42.05.png(https:/...

때는 바야흐로 momat.co(http://momat.co/) 를 만들고나서 수줍은 홍보글(https://medium.com/@kimtoma/momat-비하인드-스토리-a-k-a-모두의-맛집-9b2bb390ed16)도 하나 올리고, 1년 하고도 3개월 넘게 일에, 회사에, 사회에 찌들어 방치하고 있다가 급작스레 다시 만남이 이루어진 2018년 5월 하고도...

결론 : 사이드 프로젝트는 사랑입니다. 01. First Meeting 여느때와 다름없이 회사 업무에 바쁘고 지쳐있던 나에게 사내 개발팀 2명이 찾아왔다. (조금 상세하게 묘사하자면 Front-end 개발자 제훈(https://www.instagram.com/jehoon.park)과 Back-end 개발자 영석(https://www.instagram....

웬지를 만들면서 사용해 본 각종 협업도구(Collaboration Tool)에 대한 소개와 각 도구들의 장/단점을 짧게 정리해봤습니다. 웬지(https://wenzi.io)라는 서비스를 만들면서 사용해 본 각종 도구(Tool)에 대한 소개와 각 도구들의 장/단점을 짧게 정리해봤습니다. ------ !img(/media/2016/08/icon_commu...

미국의 공공데이터를 시각화한 DATA USA 사이트와 암울한 대한민국 정부 3.0 사이트 비교 및 공공데이터 디자인 사례 !미국 공공 데이터 시각화 사이트 썸네일(/media/2016/04/datausa_io.png) 미국 공공 데이터 시각화 사이트 DATA USA 난 문화 사대주의자는 아니지만, 종종 선진국이라 불리는 국가들이 국가적 차원에서 Da...

프로젝트 진행 시 산출물의 파일명을 표기하는 방법을 정리해봤습니다. - 파일 명은 영문과 숫자로 표기할 것 - 영문을 기본으로 하지만, 국문 혼용 표기도 가능함점(.)이나 빈칸( )은 사용하지 말고, 언더 스코어(_)를 사용할 것 - 소수 점 이하의 버전 표기 시에는 점(.) 사용 가능최대한 짧게 작성하고, 길어도 25자 이내로 작성할 것 -...