전체 글

들어가며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 ..

인프런 워밍업 클럽 미션 중 작성했던 글을 옮겨서 발행합니다. 원문 링크↗ 2주차는 확실히 쉽지 않았다. 휴일이 많다고 여유롭게 생각했었는데 휴일이 많다는 말은 약속이 생긴다는 말이다. 때문에 오히려 시간에 쫓겼다. 저번주의 보완할 점 중 "강의 메모 이외에 느낀 점 그때 그때 작성하기"가 있었는데, 강의 메모도 제대로 못했던 것 같아 많이 아쉽다. 그래도 어떻게든 스케줄에 맞춰 이번주 공부를 마무리해서 그 과정을 작성한다. 📖 강의 요약Day 7 중간점검 : 특강 및 LIVE QnA5월 4일에는 중간 점검 특강이 있었다. 네이밍 컨벤션, 아이콘, 멀티 에딧과 관련된 내용이었다. Naming Convention먼저 네이밍 컨벤션시 팁을 알려주셨다. 항상 신경쓰려고 하는데 놓치는 부분이다. 네이밍 컨벤션..

인프런 워밍업 클럽 미션 중 작성했던 글을 옮겨서 발행합니다. 원문 링크↗  직장과 사이드 프로젝트를 병행하던 중 디자인 시스템에 대한 심화적인 공부의 필요성을 느꼈다. 사수 없는 디자이너라 스스로 배우고 성장해야만 했는데, 해외 아티클, 유튜브 등을 열심히 찾아봤지만 "어디서부터 어디까지 실무에서 적용시켜야 할지 모르겠다"는 문제 때문에 어려움을 겪었다. 그러던중 인프런 워밍업 클럽 - 스터디 1기의 존재를 알게됐고, 좋은 기회로 보여 신청했다. 📖 강의 요약0. OT첫 프로그램은 OT였다. 줌으로 화상회의를 진행하는 동시에 피그잼에서 강사님과 의사소통했다. 덕분에 집중이 잘됐다. 스터디는 다같이 으쌰으쌰하는 분위기가 중요한데, 참여자 모두가 쉽게 사용할 수 있고 귀여운 의사소통이 가능한 툴이라 그랬..

! 제목과 본문에서 사용되는 '디자이너'는 UX/UI 디자이너를 의미합니다. 회사에 디자이너가 나뿐인데..괜찮나? 인터넷에서 서핑을 하다 보면 다음과 같은 제목의 글을 많이 볼 수 있다. 회사에 디자이너가 나뿐인데... 신입인데 가도 될까, 힘들지 않을까, 사수가 없다, 배울게 없다 … 당연히 힘들다. 나도 같은 이유로 첫 직장에 입사하기를 망설였었다. 지금 다니는 곳도 마찬가지다. 나만 이렇게 일하는건가? 정말 이렇게 해도 되나? 수많은 생각이 들었다. 하지만 ‘1인 디자이너’가 정말로 특별한, 예외적인 경우인가? 아니다. 혼자 일하는 디자이너는 굉장히 많다. 인하우스 기준 62.8%가 혼자 디자인한다 2023년의 통계가 아직 올라오지 않아 2022년의 통계를 탐고한다. 산업통상자원부에서 작성한 202..