[디자인시스템] 우아한플레이그라운드 #우아콘2024
·
지니월드/경험
1. 우아한플레이그라운드가 필요했던배경문서 사이트엔 정책에 대한 내용만 있고, 코드를 어떻게 작성해야 하는 지는 찾아 볼수 없다.스토리북에서는 다양한 사례와 코드가 제공되긴 하는데 코드 일부가 잘 표시되고 있지 않다.AS-IS문서 사이트에서 개요 읽어보기스토리북에서 예제 확인하기대대로 내려오는 과거 조상들의 코드에서 한 수 배우기빈 프로젝트를 생성하여 맨땅에서 실험해보기  2. 구현 👍에디터와 프리뷰srcDoc을 통해 html 컨텐츠를 문자열 형태로 전달npm 라이브러리 importESM 기반의 CDN인 esm.sh에서 npm 라이브러리 로드importmap을 사용하여 esm.sh로 매핑TypeScript/JSX 지원하기esbuild-wasm을 사용하여 JavaScript로 트랜스파일TypeScript..
ChatGPT 돌아와...
·
지니월드/단상
OpenAI Status OpenAI Status status.openai.com
[Vue3] type: String as PropType와 validator 차이점
·
개발일지/2024
type: String as PropType와 validator를 사용하는 방식은 타입 정의와 값 검증의 차이에 따라 적합한 상황이 다릅니다. 아래는 두 방법의 차이를 정리한 내용입니다.1. type: String as PropType의 특징주로 TypeScript를 사용하는 경우:PropType을 사용하면, TypeScript가 제공하는 정적 타입 검사 기능을 통해 컴파일 타임에 허용되는 값의 범위를 명확히 정의할 수 있습니다.IDE에서 자동 완성 및 타입 오류를 바로 확인할 수 있습니다.사용 예시:size: { type: String as PropType, default: 'medium',}장점:타입 안전성을 제공하며, 런타임에 추가 검증 코드가 필요 없습니다.TypeScript의 타입 추론과 완..
[241203] 제12회 널리 웨비나 :: 접근성은 인권이다
·
지니월드/경험
Designing Inclusive AI for Marginalized Population - 김영호 Naver AI Lab AI가 이들의 대화를 중간에서 도와준다면?AACessTalkYoung-Ho Kim | HCI Researcher and Builder Young-Ho Kim | HCI Researcher and BuilderI am a Lead Research Scientist at NAVER AI Lab, leading the Human-Computer Interaction Research Group. As a Human-Computer Interaction researcher, I do research at the intersection of Ubiquitous Computing, Person..
Vuex 와 Pinia 비교
·
개발일지/2024
Vuex와 Pinia는 Vue.js 애플리케이션에서 상태 관리를 제공하는 라이브러리입니다. Vuex는 Vue의 공식 상태 관리 라이브러리이고, Pinia는 Vue 3와 함께 등장한 경량 상태 관리 솔루션으로, Vuex의 복잡성을 줄이고 더 직관적인 사용법을 제공합니다.  Vuex가 무엇인가요? | VuexVuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를v3.vuex.vuejs.org  Pinia | The intuitive store for Vue.jsIntuitive, type safe, light and flexible Store for Vuepini..
나만의 tailwind CSS 만들기 (preset.scss)
·
개발일지/2024
지난 10년간 여러 CSS 방법론들이 있었지만 2024년인 지금 가장 대중적인 방법은 아마 tailwind CSS 일 것이다. 하지만 나에겐 테일윈드마저 약간 오버스펙으로 다가와서 직접 필요한 스타일만 추가해서 유틸리티 CSS를 만들게 되었다. 결과적으로 핀크 내 서비스를 개발할 때 아주 편리하고 유용하게 사용하고 있어서 공유해본다. 사실 특별할 건 정말 하나도 없다. Tailwind CSS란?Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utili..
[2023] 핀크 디자인 시스템 구축기 (작성중)
·
지니월드/경력
- 참고 -아직 수정중인 글입니다   서론환경적 이슈전직장에서 주된 작업이 디자인 시스템이었기 때문에 핀크에 이직한 뒤 가장 먼저 맡게 된 것은 디자인시스템 구축이었다. 잦은 디자이너, 퍼블리셔, 개발자 교체로 인해서 히스토리가 연결되기 쉽지 않은 상태였다. 디자인 역시 스케치에서 피그마로 전환하게 된지 얼마 되지 않아서 모든 화면이 피그마 파일로 존재하는 것도 아니었다. 디자인 시스템 구축을 해본 경험이 있는 디자이너 1명이 리딩을 하고 있었는데 반년이 지나도록 별다른 성과를 만들지 못한 것 같았다. 사실 디자이너 혼자서 운영/신규 피쳐 디자인 대응을 해가면서 모바일(AOS/IOS)과 웹 디자인 시스템을 구축한다는 건 정말 어려운 일이다. 회사에서도 결과물이 나오지 않은 상태에서 수개월 간 디자인 시스..
핀크 (2023.08 ~ ing)
·
지니월드/경력
2023디자인 시스템 구축프레임워크별 코어 컴포넌트 제작 (Vue 37종, React 38종)프레임워크별 스토리북 제작핀크 서비스 운영 업무위* (신규 서비스) 마크업 외주 관리전자문서지갑 마크업 개발 Vue2자동차보험비교 마크업 개발 React 2024핀크 웹 사이트 리팩토링 Next.js금융상품탭 마크업 Vue2위* 마크업 QA 대응 Vue2어그리 (포겟 B2C) 마크업 Vue3기타 핀크 운영 프로모션 페이지카드 프로모션머니충전소 쿠팡파트너스홈페이지 대출상품 정보, 약관 수정POP 서버 레거시 정리 (폰트 통일화)마이데이터 연결 플로우 개선 마크업 React핀또 복권 마크업 Vue2
[2022] 카카오워크 어드민 디자인시스템
·
지니월드/경력
서론디자인모듈파트의 시작카카오엔터프라이즈는 B2B 서비스를 제공하기 때문에 신규 사업이 생길 때마다 필연적으로 어드민이 같이 개발되어 고객사에게 전달이 되어야 한다. 각각의 서비스 자체의 모든 디자인을 시스템화 하기는 정말 어려운 일이었지만 어드민이라는 특수 환경은 어느정도 통일이 가능한 영역이었다. 비슷한 디자인을 각각의 디자이너, 개발자가 매번 새롭게 만드는 것도 리소스 낭비로 여겨질 즈음이었다. 2022년 5월에 정식으로 목적 조직인 '디자인모듈파트'로 발령이 되었고 파트장을 맡아 프로젝트를 이끌었다. 사실 내가 아니더라도 모두가 조직장이 될만한 훌륭한 팀원들 덕에 완성도 높은 작업을 진행할 수 있었다. 대부분의 회사에서는 디자인 시스템을 구축하는 것이 업무 외 적으로 시간이 되면 하는 일로 우선순..