UX/UI 디자이너

이번 포스팅을 마지막으로 토스 simplicity21은 마무리 되었다. 서비스의 사업이 늘어감에 따라 전체적인 서비스의 통일감을 중요하게 생각한다는걸 알 수 있다. 다양한 금융상품을 다루고 있어 각 금융상품의 특징도 함께 알 수 있었다. 다음 포스팅으론 카카오모빌리티 보고서를 살펴볼 생각이다. 토스 simplicity21 내 마음대로 적어보는 리뷰 - UXUI 컨퍼런스 2021 (3)>> 토스 simplicity21 내 마음대로 적어보는 리뷰 - UXUI 컨퍼런스 2021 (3) 이제 몇강의 남지 않은 simplicity. 듣는강의 별로 이전에 작업했던 기억이 있어서 엄청난 공감이 되는 강의도 있고, 핀테크 분야라서 엄청나게 새로운 부분도 있었다. 공통적인 감상은 디테일을 studiodebbbie.tis..

이제 몇강의 남지 않은 simplicity. 듣는강의 별로 이전에 작업했던 기억이 있어서 엄청난 공감이 되는 강의도 있고, 핀테크 분야라서 엄청나게 새로운 부분도 있었다. 공통적인 감상은 디테일을 위해 100일간의 도전도 감내하는 점이 부럽기도 하고 대단하기도 하고. 나도 회사에서 좀더 인원이 많아 전문분야를 갖게 된다면 한 분야의 디테일에 더 깊기 몰입할 수 있을까? 상상도 해보았다.ㅎㅎ 토스 simplicity21 내 마음대로 적어보는 리뷰 - UXUI 컨퍼런스 2021 (2)>> 토스 simplicity21 내 마음대로 적어보는 리뷰 - UXUI 컨퍼런스 2021 (2) 1편에 이어서 toss의 디자인 컨퍼런스 simplicity21을 시간 날 때 마다 틈틈히 듣고 있다. 이번에 본 편들은 부제목인..

1편에 이어서 toss의 디자인 컨퍼런스 simplicity21을 시간 날 때 마다 틈틈히 듣고 있다. 이번에 본 편들은 부제목인 신은 디테일에 있다와 어울릴정도로 디테일에 신경쓰는 모습을 찾을 수 있었다. 강의를 들을 떄마다 하나하나 줄어드는 아쉬움을 느끼며 보고 있다. 토스 simplicity21 내 마음대로 적어보는 리뷰 - UXUI 컨퍼런스 2021 (1)>> 토스 simplicity21 내 마음대로 적어보는 리뷰 - UXUI 컨퍼런스 2021 (1) 프로덕트를 좋아하는 디자이너라면 한번 쯤 일해보고 싶은곳, 금융계의 유니콘 서비스 토스 (TOSS). 늦게나마 세션 링크를 열어서 다른 프로덕트 디자이너들은 1)어떤 과제를 받는지 2)어떤 해결 studiodebbbie.tistory.com 토스 s..

프로덕트를 좋아하는 디자이너라면 한번 쯤 일해보고 싶은곳, 금융계의 유니콘 서비스 토스 (TOSS). 늦게나마 세션 링크를 열어서 다른 프로덕트 디자이너들은 1)어떤 과제를 받는지 2)어떤 해결방식을 사용하는지 3)서비스에 어떻게 녹여내는지 궁금해서 구경해보았다. 영상은 여러개지만, 시간이 날 때마다 분할 해서 보고 있다. 그리고 각 섹션별로 나도 UX/UI 디자이너로 일하면서 느꼈던 점들을 덧붙여 보았다. 토스 simplicity21 내 마음대로 적어보는 리뷰 - UXUI 컨퍼런스 2021 (1) 2021/10/01 [오직 한 사람 사장님을 위하여] 1) 내용 -장사를 하는 사장님들은 매출과 지출과 자금의 흐름이 중요하고 이를 캐치해야 한다. -매출 리포트를 만들 때 사장님의 마인드에서 중요한 부분을 ..

1.같은 콤포넌트 레벨간 통신 예) Root 인스턴스 a.appHeader b.appContent ab사이의 어떻게 통신을 할지 확인 -script 생성 -새로운 인스턴스 생성 new Vue({ el:'#app', data:{ str:'hi' } }) -div에도 str값이 출력 될 수 있도록 {{str}} -live server로 확인하면, Root안에 str 스트링 값이 'hi'가 제대로 출력 되는걸 볼 수 있다. 2.실습! *app-header과 app-content 콤포넌트를 만들고, 각각을 변수와 연결, div로 화면에 출력하도록 1)new Vue로 인스턴스 만들기 div중 app과 연결되고, 구성하는 콤포넌트를 각 app-header은 appHeader과, app-content는 appCont..

1.Vue 인스턴스에 app-content 콤포넌트 정의해주기 -#app 아이디에서, -app-content 콤포넌트 -가지고 있는 data는 숫자로 10 new Vue({ el: '#app', components:{ 'app-content':appContent }, data: { num: 10 } }) 2.appContent 함수 정의해주기 -props안에 propsdata라 정의 (*여기서 실수함, 프롭스의 데이터 값이니까 그대로 propsdata라고 써주고, 나중에 v-bind에서 정확히 propsdata들 중에서(여러개라면) 어떤걸 사용할지 정의해줄수 있음) -{{}}로, propsdata값 그대로 보여주기 var appContent = { template: '{{propsdata}}', prop..

컴포넌트 통신 방식 -화면 안에 여러개의 콤포넌트를 만들면 콤포넌트 가느이 관계가 생김 -각각의 컴포넌트가 각각의 데이터를 갖는데, 서로 공유하기 위해선 a.props랑 b.이벤트를 사용해야함. -사용하기 위해서는 규칙을 우리가 알아야함 -규칙이 있어야 데이터의 흐름을 추측하고 버그를 잡기 쉬워진다. (만약, 규칙이 없다면 어디서 부터 데이터가 왔는지 확인하기 어려워짐) -위에서 아래로 내려가는건 props, 아래에서 위로 올라가는건 event 1.props 속성 -Vue라는 인스턴스를 만들고 el로 #app -app header이라는 콤포넌트를 만들어 준다. -여기서 teamplate만 따로 사용할것, new Vue({ el: '#app', components:{ 'app-header':{ templa..

디자인에서도 콤포넌트의 개념을 사용하는데 vue에서도 콤포넌트의 단위를 사용한다. 예전에 html을 배울때 여러 페이지 생성시 js로 헤더와 푸터를 붙이는 작업을 했는데 vue에서도 가능했다. Vue.js instance study- 뷰 전역 콤포넌트와 지역 콤포넌트 2021/08/08 [뷰 컴포넌트] 화면의 영역을 구분하여 개발하고, 콤포넌트 안에 콤포넌트를 넣을 수 있다. 콤포넌트를 사용하여 제작하면 재사용(코드의 반족을 최소화) 할 수 있고, 빠르게 화면을 만들 수 있음. 1.새롭게 app이라는 div 정의 2.script를 두개 생성 a.vue 스크립트 b.new Vue 스크립트 3.new Vue 스크립트 안에 엘레멘트인 el을 적고 tag가 app인 div를 선택, 4.open live serv..

정신없는 7월이 지나고 8월 부터 다시 공부 시작. 오늘 공부할 뷰 인스턴스는 뷰로 개발하기 위한 기본 단위! Vue.js instance study- 뷰 인스턴스 이해하기 2021/08/06 크롬 확장 프로그램에서 뷰개발자도구를 설치하면, 뷰가 적용된 창에서 검사 > Vue 항목이 생성된다. *개발자 도구 단축키 맥: option+command+i -components: vue js를 실행했을 때 기본적인 구조 확인 -vuex -events *현재 상태에서는 data: 안에 "Hello Vue.js”가 있는 걸 볼 수 있고 더블 클릭해서 데이터를 변경할 수 있다. data의 값을 변경하였고, 내가 변경한 값 그대로 적용되는걸 확인 할 수 있다. => 이것이 reactivity이다! 2.뷰 인스턴스 -뷰..

view는 브라우저에서 사용자에게 보여주는 화면이고, 화면의 인풋, 버튼과 같은 요소들이 포함되어 있다. 보통은 html이며, DOM이라는 자바스크립트로 조작이 가능하도록 한다. 사용자가 인터렉션으로 인풋에 입력하거나 클릭하는 이벤트가 발생하면 뷰모델에서 DOM listeners로 받아 자바스크립트의 모델에서 데이터를 변경하게 된다. 자비스크립트 안에서 변경된 데이터를 Data bindings를 통해 내용을 전달해준다. Vue.js reactivity study- 뷰 리액티비티 스터디 2021/07/11 1.html파일을 새로 생성해서 기본 html 파일을 생성한다. -자동으로 html 기본 태그를 생성 !+tab키 -body태그 안에 div 생성하기 div#app입력하면 id가 app인 div를 자동 ..