전체보기

도시락 메뉴 정하기 앱, 도꾸를 만들기까지 도꾸를 출시하다 약 한 달간 Cursor, ChatGPT와 씨름한 끝에, 드디어 모바일 어플 도꾸를 출시했다. 도꾸는 도시락 메뉴 결정을 도와주는 앱으로, 두 가지 추천 기능을 가지고 있다.1. 랜덤 슬롯 돌리기 1. 냉장고 기반 추천.기능은 단순하지만 기획부터 디자인, 개발, 배포까지 모든 과정을 혼자서 진행한 프로젝트라는 점에서 의미가 크다.앱스토어에서 보기 왜 만들었을까?경력은 쌓여가지만 나는 대부분 웹 프로젝트만 다뤄왔다. 그 과정에서 "모바일 앱 디자인은 어떤 점이 다를까? 실제 앱에서는 어떤 느낌으로 구현될까?"라는 고민이 생겼다. 단순히 화면을 그리는 것 이상으로, 실제로 동작하는 앱을 직접 만들어보고 싶었다.마침 AI를 활용해서 자신만의 프로젝트를..

스터디 신청 계기인터랙션 디자인에 대한 갈증은 항상 있었다. 토스나 디스코드를 사용하면서 "와, 나도 이런 거 해보고 싶다"고 생각하지 않는 프로덕트 디자이너가 어디 있을까. 또 토스나 듀오링고 등 디자이너 채용 공고를 보면 인터랙션을 굉장히 중요시하는데, 그런 부분들을 보고 앞으로의 디자이너가 가야 할 방향 중 하나가 '인터랙션' 이라고 생각했다. 다만 회사 업무, 사이드 프로젝트, 건강관리 등 다른 우선순위에 밀려 항상 뒤로 밀려 있었다. 그러던 중 keem님의 스터디 모집 글을 보고, 이건 너무 좋은 기회다 싶어 바로 신청했다. 스터디는 3주 동안, 일요일마다 5시간씩 만나 원하는 작업을 진행하고, 작업에 대해 자유롭게 이야기하고 피드백을 주고받는 방식으로 운영됐다. 툴은 Framer를 쓰게 되었는..

최근 들어 가장 많이 했던 고민은 "어떤 일에 집중하고, 어떤 일을 효율적으로 할 것인가?"였다. UX/UI 디자이너로서 다양한 시도를 해보고 싶다. 사용자 흐름을 추적하거나, 인터랙션을 다양하게 넣거나, 사용자 테스트를 진행하는 등. 하지만 요즘 나의 작업은 "기획을 화면에 옮기는 것", "기획자와 개발자의 중간자"에 머무르고 있다는 느낌이 들었다. 그리고 그 이유 중 하나가 바로 디자인 시스템이다.보통 작업 순서는 다음과 같다. 컨셉을 잡고 대략적인 화면을 구축한 뒤, 이를 기반으로 디자인 시스템을 구축한다. 이후의 화면들은 이 시스템을 바탕으로 만들어진다. 하지만 이 과정 속에서 종종 "내가 디자인 시스템에 갇혀 있나?"라는 의문이 들었다.이 글에서는 내가 겪은 디자인 시스템의 문제점, 그리고 문제..

들어가며V프로젝트를 진행하던 중 시맨틱 스페이싱에 대한 의문이 들었다. 아틀라시안 디자인 시스템의 시맨틱 스페이싱이 참고하기 좋아보여서 그걸 레퍼런스로 삼았지만, 이게 최선일까?라는 생각을 계속했다.확장성도 없고 단순하지도 않다.당시에는 문제가 있다는걸 알면서도 시간적 여유가 없어 바로 진행했지만, 이번에 조금 여유가 생겨 그 부분을 검토해보려 한다. 우선은 당시에 사용했던 스페이싱을 검토해보고, 어떤 문제가 있었는지 확인한다. 이후 아티클 등을 통해 어떤 점을 개선할 수 있을지 보고. 이후 다음 프로젝트에서 적용해볼 스페이싱의 청사진을 만들어보려 한다.  문제: 너무 작고 좁다primitivesemanticnamepxnamevaluespacing-22pxcontainer-center_gapspacing..

올해 초 퍼블리싱을 공부할 때 Divize에서 컴포넌트를 많이 따라 만들었다. 그중 막혔던 부분들이나 잘 몰랐던 부분들을 메모해 놨었는데, 다시 읽어보고자 블로그에 업로드한다.  Tweet Card: 독립적인 콘텐츠를 표현. 요소를 사용해 설명을 붙일 수 있다.a의 target 속성은 링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시_blank 링크된 문서를 새로운 윈도우나 탭에서 오픈_self 링크된 문서를 링크가 위치한 현재 프레임에서 오픈_parent 링크된 문서를 현재 프레임의 부모 프레임에서 오픈_top 링크된 문서를 현재 윈도우 전체에서 오픈프레임 이름 링크된 문서를 명시된 프레임에서 오픈role=""ARIA 역할을 포함ARIA(Accessible Rich Internet Applicatio..

회사에서 처음으로 퍼블리싱을 한 프로젝트가 끝났다. 7월에 진행한 프로젝트이니 시간이 좀 지났지만, 업무 도중에 메모했던 것들과 작업 내용들을 다시 보면서 회고했다. 해당 프로젝트에서는 짧은 기획과 디자인, 그리고 퍼블리싱을 진행하였는데 그중에서 퍼블리싱에만 집중해봤다. KPT 템플릿에 커뮤니케이션, HTML, CSS 세 가지 분야로 나누어봤다. 1️⃣ KPT 회고피그잼에 포스트잇을 붙여가며 분류했다.Keep(CMN) 할 일 정리하면서 작업 진행(HTML) 접근성 고려한 마크업(CSS) 효율적으로 관리하기 위해 variables 사용Problem(CMN) 퍼블리싱 범위에 대한 혼란(HTML)Figma 'AutoHTML'을 사용한 내보내기: 필요하지 않은 부분까지 로 작성되어 수정할 부분이 많아진다.명확하..

1️⃣ 들어가며현대카드 어플을 사용하던 중, 스위치의 UI가 묘하게 혼란스럽다는 사실을 깨달았다. 괜히 스위치를 몇 번 켰다 껐다를 반복하고 내용을 확인한 뒤, 진행 중이던 가입을 끝냈다. 무엇이 나를 불편하게 만들었을까?답을 내리기 위해 다양한 사례를 조사하고, 머티리얼과 애플의 디자인 가이드를 참고해 보았다. 이를 통해 현대카드 어플의 스위치가 왜 그렇게 혼란스러웠는지, 그리고 이를 개선할 수 있는 방법은 무엇인지 알아보고자 한다. 2️⃣ 다크모드에서 스위치 사례 먼저 떠오른 요인 중 하나는 켠 상태에서 스위치의 배경색이었다. 다크모드인데 검은색 스위치를 사용하니 배경과 대비가 뚜렷하지 않아 스위치의 선택이 명확하지 않게 보인게 아닐까? 때문에 스위치 사례를 조사하면서 배경과 스위치 배경색의 대비도 ..

글에 등장하는 모든 '디자이너'는 UX/UI 디자이너를 의미합니다. 1️⃣ 지금 디자이너의 역량을 살펴봐야 할 이유UX 디자인 산업에 유례 없을 변화가 찾아왔다. AI가 등장한 것이다. 해외에서는 해고되는 디자이너들의 이야기가 들리며, 미래에 사라질 직업이라는 말도 뉴스에서 흔히 들을 수 있다. 이 직업의 역할이 어떻게 변하고 디지털 제품을 만들고 발전시키는 방법이 얼마나 변할지 모르겠다. 분명한 건 10년 이후의 미래까지는 어떻게 될지 몰라도, 당장 눈앞의 5년은 이 직업을 유지하고 싶다는 내 마음이었다. 따라서 이 직업을 유지하기 위해 내가 어떤 일들을 할 수 있고 해야 하는지를 알고 싶었다. 이 글에서는 그 일들을 조사하고 정리해보려 한다. 먼저 디자이너들이 기존에 어떤 역량을 키웠는지 알아보고, ..

인프런 워밍업 클럽 미션 중 작성했던 글을 옮겨서 발행합니다. 원문 링크↗  드디어 스터디의 마지막 주다!! 이번주에는 배리어블을 다크모드, 브랜드, 반응형 디자인, 다중언어 등 모드를 설정해서 적용하는 법을 배우고 페이지에 적용해봤다. 📖 강의 요약8. 모드 설정해서 배리어블 제대로 활용하기모드는 컬렉션 내 배리어블 값의 목록을 나타낸다. 컬렉션 내 다양한 모드가 있는 경우 맥락에 따라 맞춰서 사용할 수 있다.피그마가 제안하는 "맥락을 전환하는 경우"라이트모드/다크모드다중언어 지원디바이스별 대응멀티브랜드 지원다크모드다크모드 제작시 고려사항서비스 특성에 따라 다르게 적용 → 컨텐츠가 돋보여야 하는가? 미디어에 집중해야 하는가?구글 M3, 애플 HIG 참고하면 좋다 → 해당 환경에서 다크모드를 많이 사용..

인프런 워밍업 클럽 미션 중 작성했던 글을 옮겨서 발행합니다. 원문 링크↗ 주중에 스케줄이 많이 잡혀서 따라잡기 쉽지 않았다. 때문에 다크모드 배리어블은 오늘 밤에 공부할 예정이라, 피드백과 네비게이션 컴포넌트, 그리고 특강에 대해서만 작성한다. 덧붙여 오늘부터는 강의요약을 좀 더 열심히 작성해봤다! 다른 분들의 발자국을 보고 약간 반성해서…ㅎㅎ 그럼 시작한다. 📖 강의 요약6. 피드백(Feedback) 컴포넌트 만들기피드백 컴포넌트는 사용자에게 행동의 결과를 전달하는 방법을 제공하는 컴포넌트를 말한다. (출처: https://www.geeksforgeeks.org/react-mui-feedback-components/) 강의에서는 Alert, Toast, Skeleton Loader, Loading ..