FrontEnd 썸네일형 리스트형 [UI/UX] 기본 프로세스는? NO STEP 1 STEP 2 STEP 3 STEP 4 1 목표수립 키파인딩 & 인사이트 무드보드 IA설계 2 관련 UX분석 와이어프레임 설계 3 이슈제기 런처아이콘 & 런치스크린 4 리서치 프로토타이핑 1. STEP 1 : 발견단계 ◎ 목표수립 : 현재 당면한 문제, 서비스 구조적 취약점 검토, 비즈니스인 해결책 가설 수립 예시) 배경) 골프레저 대중화 및 많은 경쟁사 등장 젊은층도 골프레저에 관심을 갖기 시작 문제) 일부 연령층 사용, 이용 고객 수 낮음 구조적취약점) 홈페이지가 단순화되어 있고 정보가 부족함 목표:해결책 가설수립) 다양한 연령대가 선호할 수 있도록 홈페이지 디자인을 개선하고, 고객이 필요로하는 컨텐츠를 보강하면 많은 고객층을 확보할 수있을 것입니다. ◎ 관련 UX 분석 1. 시각디자.. 더보기 [UI/UX] UI/UX Design이란? 1. UX(User Experience) : 사용자 경험 ▷ 사용자가 어떤 제품이나 서비스와 상호작용하는 과정에서 얻는 총체적인 경험입니다. ▷ 사용자 경험 디자인 : 익숙함을 전제로 디자인 하는 것 ▷ 예시) 과거의 네이트온과 유사한 카카오톡 ▷ 사용성이 좋다 : UX가 좋음 ▷ 사용성이 나쁘다 : UX에 문제가 있음 ◎ UX 디자인 원리(3가지) (1) 일관성의 원리 ▷ 상단 네비게이션바,신세계 백화점 홈페이지, 이마트, 스타벅스 로고의 위치, SSG 닷컴 (2) 행동유도성의 원리 ▷ 사람이 자연스럽게 행동할 수 있게 하는 시각적인 요소 (3) 정보설계(정보위계) ▷ 페이지 구성을 위한 카테고리 정리 ◎ 원리를 알아야하는 이유? ▷ 디자인에 도움이 됩니다. ▷ 논리력을 키울 수 있습니다. 2. UI(.. 더보기 [java script] Vue.js JSON 데이터 다루기 1. JSON : JavaScript Object Notation ▷ 외부의 데이터를 읽어서 표시하는 방식입니다. ◎ JSON을 읽어 들이는 예제(Vue 사용 x) JSON을 읽어 들이는 예제（JavaScript）- console 출력 if문 안에 있는 내용을 보면 1. 파일을 읽어들이면 FileReader 오브젝트를 만들어서 파일을 처리 2. onload 이벤트로 읽어 들인 후 처리 3. e.target.result에 읽어 들인 데이터가 있는지 전체 데이터 출력 4. JSON.parse 메서드로 JSON 데이터로 변경 5. json 데이터 [0]에 있는 title 출력 6. json 데이터 [0]에 있는 body 출력 ◎ JSON을 읽어 들이는 예제(Vue 사용) JSON을 읽어들이는 예제（Vue.js.. 더보기 [java script] Vue.js 컴포넌트 1. 컴포넌트란? ▷ 부품으로 정리할 때 component를 사용합니다. ◎ 컴포넌트를 만들어 표시하는 예제 컴포넌트를 만들어서 표시하는 예제 (1) HTML부 → 준비된 컴포넌트가 표시됩니다. (2) script부 위와 같은 방법으로 사용하면 됩니다. 결과는 아래와 같은 방법으로 출력됩니다. ◎ 컴포넌트의 data를 function으로 만들기(각각 다른 카운팅 하는 컴포넌트) 예제 각각 다른 카운팅을 하는 컴포넌트 예제 2. props 옵션 : HTML의 태그에서 값을 받아 전달하는 것입니다. // script 부분 : 카멜 케이스 props: { myName: String } // HTML 부분 : 케밥 케이스 위의 형식과 같은 방식으로 연결을 해줘야 컴포넌트가 실행됩니다. my-name과 같은 형식.. 더보기 [java script] Vue.js 애니메이션 효과 적용(transition) 1. transition : 표시/비표시 애니메이션 효과를 나타냅니다. ▷ 나타날(혹은 사라질) HTML 태그를 transition 태그로 감쌉니다. ▷ 어떻게 변화할지를 CSS로 준비합니다. 바로 예제로 알아보도록 하습니다!! ◎ 체크박스를 누르면 애니메이션 효과가 나타나는 예제 체크박스로 표시/비표시 애니메이션 효과를 주는 예제 변경 표시/비표시의 애니메이션~ 애니메이션 효과를 사용할 때 효과를 주고싶은 문구에 으로 감쌉니다. 그리고 어떻게 변화할지 CSS로 준비합니다. 적용 가능한 CSS 스타일 (1) 태그가 나타날 때 ▷ .v-enter : 나타나기 전의 상태 ▷ .v-enter-active : 나타나고 있는 상태 ▷ .v-enter-to : 나타난 상태 (2) 태그가 사라질 때 ▷ .v-leav.. 더보기 [java script] Vue.js markdown 에디터 만들기 1. Markdown 에디터란? ▷ 문장/문서를 가볍게 작성할 수있는 '문장 작성법' 중 하나입니다. ▷ 간단한 기호를 사용해서 표제나 강조 등을 표시하고 이를 HTML로 변경하는 것도 가능합니다. Markdown을 사용할 때, 아래의 코드를 하나 추가해야 합니다. Markdown은 표준이 없다는 단점이 있고 모든 HTML을 대신하지 못합니다. NO 항목 Markdown HTML 1 표제1 # text text 2 표제2 ## text text 3 표제3 ### text text 4 표제4 #### text text 5 표제5 ##### text text 6 번호 없는 리스트 - text text 7 번호 없는 리스트 * text text 8 강조(기울임) *text* text 9 강한 강조(진하게) *.. 더보기 [java script] Vue.js 데이터 변화(computed, watch)를 이용한 마무리 예 ◎ 이번에 배운 computed, watch를 이용한 예제 조건) ▷ 입력 금지 문자열을 ,(콤마) 기준으로 입력할 수 있다. ▷ 제한 시간을 넣고 시작 버튼을 누르면 텍스트를 넣을 수 있다. ▷ 제한 시간이 실시간으로 표시된다. ▷ 입력 중 금지 문자열이 나올 경우 경고를 띄우고 확인 버튼을 누르면 해당 문자열은 삭제되며 시간이 +10초 추가된다. ▷ 제한 시간이 완료되면 텍스트 입력창은 비활성화되고 입력 창 아래 입력한 문자의 개수가 표시되며 금지어를 사용한 횟수 * 12 한 벌점을 출력한다. 결과 화면) 제한 시간내에 문자 입력하기 금지문자 (,로 나누어 복수입력가능) 제한시간을 입력하세요 (초) 시작 남은 시간 {{ restTime }}초 {{ inputText.length }} 개의 문자를 입력.. 더보기 [java script] Vue.js 데이터 변화 감지 프로퍼티(watch 2) ◎ 애니매이션 효과 적용 예제 TweenMax 테스트 이동 위와 같은 코드를 사용하면 애니매이션을 적용할 수 있습니다. 여기서는 따로 Vue를 사용하지 않고 그냥 method로만 결과를 출력했습니다. TweenMax.to( ' id명 ', 이동시간, { 이동축 : "이동 값"}) 과 같은 방법으로 사용하면 애니매이션 효과가 나타납니다. ◎ watch를 이용한 애니매이션 추가 예제 숫자가 빠르게 올라가는 애니메이션을 보여주며 값이 증가하는 input태그 예제 값은 {{ animeNumber }}입니다. 숫자를 입력하면 해당 값만큼 애니메이션 효과를 이용해 값을 증가시킵니다. this.$data는 data에 있는 모든 데이터 값을 다 가져오는 것입니다. 애니메이션 효과는 tweenedNumber를 myNum.. 더보기 이전 1 2 3 4 5 6 다음
