UX/UI 디자이너

0.들어가며 지도 UI를 작업할 일이 있었는데, 바텀시트를 시도해보고 싶어서 리서치 해보게 되었다. 기존에는 지도뷰+전체 UI를 넣는 방식으로 많이 진행했었지만, 노출해야할 정보가 많아짐에 따라 고민이 되었다. 그래서 바텀시트 UI를 차용하여, 메인 정보만 노출하고 추가 정보를 원할시 하단에 정보를 추가하기로 하였다. [UI리서치] 바텀시트 - 네이버맵, 티맵, 에어비앤비, 쏘카 리서치 2023/01/22 1. 바텀시트 디자이란? - 개요: 바텀시트는 하단에 고정된 모달 형태로, 페이지는 넘어가지 않되, 중요한 내용을 강조할때 사용한다. -구성: 웹/앱 둘다 가능한데, 구글 머터리얼 디자인 기준으로 컨테이너, 드래그 핸들, 스크림으로 구성되어 있다. -컨테이너 바텀시트 내용이 들어갈 부분이다. 컨테이너 ..

일전에 한 번 읽었던 도서였다. 그때는 기획자겸 디자이너 였는데 현재는 PO가 되었다. 하지만 PO가 정확히 어떤 일을 해야하는지 아직까지 모호했다. 이전까지 하던일을 그대로 하되, 내가 담당자인 프로젝트가 생기는걸까? 프로덕트 오너 - 쿠팡의 PO가 말하는 애자일 혁신 전략 2023/01/07 p.33 PO는 늘 명확한 사실과 데이터를 가지고 설득해야한다. '잘 이행된 프로덕트 관리는 회사와 제품을 향상시키기 때문에 가장 중요한 기능이 될 수도 있지만, 제대로 하지 않았을 경우 회사와 팀에 엄청난 해를 끼칠수도 있다.' => 우선순위가 밀리거나 기능이 추가되는 일은 얼마든지 있을수 있다. 이에 대해 불만을 토로하는 상대 팀원은 얼마든 있을수 있다. (경험담이다!) 중요한건 평점심을 갖고 얼마나 논리적으..

예전에 최초 발간 되었을때 UX디자이너들 사이에서 화제가 되었던 도서였던 기억이 있다. 그 때 한창 데이터를 기반으로 디자인하는 것에 목말라 있었는데, 기회가 되서 읽게 되었다. Data-Driven UX - 뷰져블 2022/12/15 p.18 데이터 드리븐 UX 디자이너의 역량은 T자형 인재가 지니는 역량이라고 표현 할 수 있다. *T자형 인재란 특정 분야의 전문가이면서 다른 분야의 폭넑은 지식을 보유한 인재를 일컫는다. => 전 사수가 나에게 남겨준 큰 배움이 있다면 ‘ 비즈니스 관점에서 사고하는 역량’이란 생각이 들었다. 학교에서 배울때나 다른 자료들을 보아도 사용자 입장에서의 편의를 고려하는 디자인이 많았다면 실제 업무를 하면서 다양한 이해관계자들의 니즈를 통합하고 그것을 서비스로 녹여내는데에 많..

모두가 간결하고 정돈이 잘 된 웹페이지 일수록, 사용자의 혼란을 덜 수 있다는 걸 알 수 있다. 그러나 서비스가 커지면서 사이트에서 더해지는 기능이 많을수록, 사용자를 메인 테스크로 이끌어야한다는 목적을 잃어버리게 된다. 좋은 책이였다고 기억하고 있지만 구체적인 내용이 흐릿해질때쯤 다시 읽게 되었다. 사용자를 생각하게 하지마! 리뷰 2022/12/14 p.23 사용자는 웹페이지를 읽지 않는다. 훑어본다. : 상품이 많아지면서 한 페이지 안에 담아야할 기능과 컨텐츠가 많아지게 된다. 무조건 콘텐츠를 간절화하고 줄여버리는 것이 답은 아닌것 같다. 사용자들이 위아래로 훑어보았을때, 페이지의 구조를 빠르게 파악할 수 있고, 사용자가 다른 작업을 하다가도 원하는 기능으로 빠르게 옮겨갈 수 있게 구조화가 잘된 웹페..

todolist 프로젝트 구조화/모듈화하기! 2022/09/15 1.vuex로 리팩토링 -git으로 브랜치 체크아웃할 때, 터미널에서 checkout vue/helpers -f로 변경한 이력이 있더라도 강제로 넘어갈 수 있음 2.프로젝트 구조화랑 모듈화 -store.js에서 코드 줄 수가 늘어날때, state와 mutations의 연결을 모를수도 있음 -store.js의 구조를 모듈화 할 수 있음 =>이제껏 만든 store.js 구조를 살펴보면 sotre.js 에서 vuex에서 import하고, state, getters, mutations, actions로 정리하여 호출함 3.ES6의 import/export 이용하여 속성별 모듈화하기 import Vue from 'vue' import Vuex fro..

1.helper함수: 각 속성들을 사용하기 용이하게 만듦 -콤포넌트가 많은 복잡한 app에서 사용할 수 있게 모듈화하기 -store.js에 한번에 몰아두는게 아닌 비슷한 기능끼리 모듈화 하기 -vuex에 내장되어 있음! state - mapState getters - mapGetters mutations - mapMutations actions - mapActions -헬퍼는 유연한 문법으로 사용 가능하다! ===>vuex에 선언한 속성을 그대로 콤포넌트로 연결 ===>ES6를 사용하기 떄문에 'multipleNum' : multipleNum으로 적어야할인자를 'multipleNum'으로 축약사용가능! ===>인자를 따로 선언하지 않아도 필요한 인자를 그대로 받아서 사용 예) ...mapMutations..

으악, 한번 포스팅을 날려버렸다. 하필이면 제일 길게 쓴 포스팅을...T.T 하지만 기본 골자는, 복잡하고 각 파일에 흝어져있는 메소드와, data props와 v-bind: 형식을 깔끔하게 store.js에 넣고, 출력할 페이지에서 간편하게 this.$store. ~ 으로 꺼내 쓸수 있다는점! Vuex로 todolist를 mutation과 action으로 리팩토링하기! 2022/09/12 1.Vuex로 mutation사용하기, =>state값을 변경할 수 있는 방법! (꼭 mutation으로 변경해야함!) =>첫번쨰 인자로 state를 가져오기 떄문! =>commit() 으로 사용! =>왜 사용해야하냐면, js코드들을 store.js에서 한눈에 모아볼 수 있고! 각각의 파일들이 깔끔하게 리팩토링 ===..

0. Vuex를 설치하는 방법 -npm방식으로 설치 ( ES5와 ES6가 있는데 ES6로 해보쟈구): 터미널에 입력! -공식 홈페이지 https://vuex.vuejs.org/installation.html Installation | Vuex Installation Direct Download / CDN https://unpkg.com/vuex@4 Unpkg.com provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like https://unpkg.com/vuex@4.0.0/dist/vuex. vuex...

const, let 리팩토링하고, 화살표 함수, Enhanced object literals, modules, export dafault 2022/09/10 지난시간에 babel을 사용하여 변수를 const와 let으로 지정하는 방법을 공부했다. 그렇다면 지난 작업인 투두리스트의 변수들을 어떻게 const와 let으로 깔끔하게 작업가능할까? 1.const와 let을 리팩토링하기! 기존 작업했던 파일에서 var 변수 확인하기! -App.vue파일에서 var를 찾아 let이나 const(오버라이딩이 안됨~)로 바꿔주기 methods:{ addOneItem:function(todoItem){ var obj = {completed: false, item: todoItem}; localStorage.setItem..

Vue.js에서 ES6사용하기! - babel, const와let 2022/09/08 1.ES6! (ECMA script 2015/메이저 업데이트) =>자바스크립트를 사용하기 편하게 (간결하게! 시간효율적으로! 빠른 재개발!) 도와주는 문법 => 프론트엔드 프레임워크인 리액트, 앵귤러, 뷰에서 사용 =>2009년에 2015 ES5 메이저 업데이트 진행, 2.BABEL =>모든 브라우저에서 ES6를 지원하지 않아서, (구 브라우저는 ES5를 사용할 수 있음) 바벨을 사용해서 브라우저 변환이 필요함 =transpiling https://babeljs.io/docs/en/learn/ Babel · The compiler for next generation JavaScript The compiler for ne..