UXUI/강의학습일지 (30) 썸네일형 리스트형 [강의학습일지] 웹개발 종합반 3주차 강의 [추억 앨범] 1. 추억 저장하기 누르면 포스팅박스가 나타났다가 사라지게 만들기 포스팅박스 나타남 포스팅박스 지정, 토글로 껐다 켰다 만들기 완성! 추억 저장하기 버튼을 누르면 포스팅박스가 나타났다가 사라진다. [추억 앨범] 2. 기록하기 누르면 카드가 자동으로 새로 생성 우선 연결 확인하기 이름 바꾸기 value 값 확인 아까 바꿨던 값 가져오기 카드 만들어서 붙이기 완성! 나만의 추억앨범 만들기 하지만 이 카드는 새로고침하면 사라진다.이유: 어디에 저장된 정보가 아니기 때문에.어딘가에 저장된 정보 = 브라우저에 관계없는 다른 곳에 저장돼야 함내가 만든 카드=만들어서 브라우저에 붙인 것새로고침 하면 원래 가지고 있는 html을 보여주고 우리가 썼던 정보는 날아감정보를 적재하고 정보를 받아와서 쓸 수 있.. [강의학습일지] 웹개발 종합반 2주차 강의 태그가 하나밖에 없는 것은 바디라고 써도 어떤 바디태그인지 바로 알 수 있어 이름표 붙일 필요 없음..태그=이름표 이름 JavaScript어떤 것의 움직임을 줄 때박스가 나왔다 들어갔다가, 색이 바뀌거나 뭔가를 진짜 움직이거나, 뭔가 했을 때 서버와 통신을 하는데 쓸수도 있음.우리가 사용하는 브라우저, 눈에 보이는 랜더링시스템 모두 자바스크립트에 맞춰 짜여있음.쭉 굳어져온 것이기 때문에 표준=자바스크립트모든 웹, 브라우저 등 자바스크립트로 작업하면 됨.HTML, CSS 웹페이지를 보는데 쓰임자바스크립트 =서버를 만드는 데에도 쓰임. 아주 많이 쓰임!자바스크립트 (프로그래밍 언어) 로직1. 변수 값을 담는 것 (문자, 숫자,...)console.log검사> console에 띄우는 것. 개발자를 위해 띄우는.. [강의학습일지] 웹개발 종합반 1주차 강의 새로고침F5저장Windows: Ctrl + SmacOS: command + S전체선택Windows: Ctrl + AmacOS: command + A잘라내기Windows: Ctrl + XmacOS: command + X콘솔창 줄 바꿈shift + enter코드정렬Windows: Ctrl + Alt + LmacOS: option + command + L들여 쓰기Tab들여 쓰기 취소 : Shift + Tab주석Windows: Ctrl + /macOS: command + /웹페이지 실행Alt + B입력 라인 자동 정렬Alt + Shift + F 웹 브라우저 작동 원리브라우저의 역할: naver.com에 대응되어 있는 컴퓨터에서 가져와서 보여주기만 하는 것요청하는 쪽: 클라이언트, 주는 쪽:서버 (내가 클라이언트.. [강의학습일지] UX기획 및 리서치 5주차 숙제 - 테스크 선정 커머스 서비스 로그인/회원가입 과정의 사용성 테스트에서 참여자가 수행할 테스크를 선정해 보세요.- 신규 가입 유저가 로그인/회원가입을 할 때 겪는 문제점을 찾아내고자 함.- 주 2회 이상 커머스 서비스를 사용하지만, 자사 서비스를 사용해 본 경험은 없는 유저 선정한 서비스: 컬리 1. 카카오로 소셜 로그인해 보세요. 2. Apple로 로그인해 보세요. 3. 컬리 아이디로 회원가입 해보세요.4. 컬리 아이디로 로그인해 보세요. 5. 아이디 찾기 1) 휴대폰 인증으로 컬리 계정을 찾아보세요.6. 아이디 찾기 2) 이메일 인증으로 컬리 계정을 찾아보세요.7. 비밀번호 찾기 1) 휴대폰 인증으로 비밀번호를 재설정해 보세요.8. 비밀번호 찾기 2) 이메일 인증으로 비밀번호를 재설정해 보세요. [강의학습일지] UX기획 및 리서치 5주차 강의 사용성 테스트 (Usability Test; UT) 프로토타입이 있다면 제품 개발 단계 중 언제든 활용할 수 있다. 유저가 제품이나 서비스를 실제 사용할 때 의도한 시나리오에 따라 테스크를 수행하는지, 문제점은 없는지 관찰하기 위해 진행 제품 개선 전에 진행하면 유저가 불편하게 생각하는 부분을 파악할 수 있음제품 개선 후에 진행하면 유저가 실제 어떻게 사용하는지를 파악할 수 있음사용성 테스트 준비필수 구성 요소: 진행자, 참가자, 테스크진행자: 참가자 관찰, 인터뷰 / 테스크 지시참가자: 피드백 진행자에게 전달 / 테스크 수행1. 사용성 테스트 목적 설정2. 참여자 리쿠르팅, 스크리닝3. 테스크 선정4. 사용성 테스트 시나리오 작성5. 파일럿 테스트 공간환경은 각상황에 따라 다르게참가자:유저와비슷해야됨 .. [강의학습일지] UX기획 및 리서치 4주차 강의 PO, PM이 포괄적 관점에서 문제정의와 가설을 수립해 줄 수 있지만 한계점 존재기술적/비즈니스/디자인관점에서 해결할수있는방법이 있는데, 디자인관점에서 해결하는 게 디자이너가 잘할 수 있음 ex. 추천로직개선해서 유저가 질 좋은 추천을 받는 게 좋다고 생각하거나, 스트리밍속도 느리면 기술적 개선해서 사용자경험을 개선할 수 있지 않을까? 이렇게 생각할 수도 있음디자이너는 유저입장에서 고려해서 역으로 제안할 수 있고 기업에서는 이렇게 어필하는 것을 선호하기도 함.유저한테 좋은 것+회사에도 좋고+내 포트폴리오에 넣을 수 있는 것 교집합을 찾는 게 아주중요!1. UX 기획 : 문제 정의 및 가설 수립문제정의- 유저 리서치를 통해 도출한 제품의 현재 문제점을 특정하는 단계- 해결해야 할 문제가 무엇인지를 정의- .. [강의학습일지] UX기획 및 리서치 3주차 강의 숙제 - 유저 페르소나 서비스를 선정하여 유저 페르소나를 작성해 보세요.- 비대면 세탁 서비스 - 외국어 학습 서비스 - 피부관리 & 성형 정보 서비스 제시된 카테고리에 외국어 학습 서비스가 있었는데, 듀오링고 아티클 스터디를 했던 게 생각나서 서비스는 듀오링고로 선택했다. 이름을 처음에는 김듀오로 하려다가 듀오링고처럼 둥글둥글한 이미지가 이름에서부터 느껴졌으면 해서 ㅇ이 세 번 들어가는 아영이라는 이름으로 바꿨다. 그리고 사진과 제목 부분에도 Radius값을 둥글게 조절했고, 컬러는 듀오링고의 브랜드 컬러를 사용했다. Brand Guidelines - Duolingo design.duolingo.com [아티클스터디] 놀면서 공부하는 듀오링고의 비밀디자이너의 UX참고서, 듀오링고 전격 해부하기 | 고구마팜듀오링고로 언어.. [강의학습일지] UX기획 및 리서치 3주차 강의 리서치 결과 정리결과를 유의미하게 정리하고 의사결정에 활용하는 방법을 알아야 함사용 맥락(상황, 장소, 시간)유저(인구 통계학적 특성, 라이프 스타일, 테스크 수행 능력)유저 경험(동기, 태도, 니즈)사용 맥락 관점에서 정리1. 사용 상황- 모든 제품 사용 경험은 특정 상황과 관련 있음- 사용 상황은 잠재적인 내적 동기로 이어질 수 있음- 유저가 사용 상황을 어떻게 인지하는지가 중요2. 사용 장소- 모든 제품은 장소에 따라 어느 정도 영향을 받음- 장소에 대한 유저의 태도가 제품 사용 경험에 영향을 미침3. 사용 시간- 수업 시간, 이동 시간과 같이 특정 유저 그룹의 경험을 반영하기도 함- 사용 시간대에 따라 유저들이 다른 특성을 가질 수 있음- 사용 지속 시간이 사용자 경험의 척도가 되기도 함 여러 개.. [강의학습일지] UX기획 및 리서치 2주차 강의 숙제 - 심층 인터뷰 질문지 작성 구인구직 서비스를 사용하는 취준생 유저가 서비스를 사용하면서 겪는 문제를 파악하기 위한 심층 인터뷰 질문을 작성해보세요. 구인구직 서비스는 잡코리아로 선정했다. [강의학습일지] UX기획 및 리서치 2주차 강의 유저리서치(User Research)유저를 이해하기 위한 모든 활동유저가 어떤 상황에서, 왜 하는지를 이해하는 것유저리서치에서 이렇게 나왔다, 그래서 이렇게 가야 한다 → 의사결정도움을 줌X, Y 축나눠서 1차적으로 나누기유저의 행동과 말을 따로 분리해서 봐야 되나?유저가 행동하는 것과 말하는 것이 다를 수 있다.(ex. 소셜데이팅서비스 설계 시)설문조사, 심층인터뷰: 프로필 상세페이지에서 어떤 걸 중요하게 생각하는지 알아보기 위한 리서치설문조사, 심층인터뷰:성격과 가치관을 중요하다유저행동데이터: 프로필사진이 압도적으로 중요하다. 우리가 부족한 게 무엇일까? →리서치각 유저리서치 목적: 함께 진행하면 시너지가 날 수 있음. 상호보완.정성적 리서치(why)-심층적 인사이트 얻기단점:소수유저, 모든 유저대표.. 이전 1 2 3 다음
