Dev.Project (29) 썸네일형 리스트형 [Todolist_Basic] Step 3. 동적인 부분에 대해서 사용자 경험 높이기 Step 3. 동적인 부분에 대해서 사용자 경험 높이기Step 2 에서 멈추면 사용자에 대해 너무 야박한 서비스이다. 왜냐하면, 입력하기 위해서 커서를 input 태그에 찍어야 하고, 입력을 하기 위해 다시 손을 마우스로 옮겨서 New item 이라는 버튼을 클릭해야하니 말이다! 또 새로운 값을 입력하려고 이전에 입력했던 것을 다 지워야 한다. 이를 위해 다음 세 가지를 추가로 설정해보자. 1> Enter키를 통해 값을 입력하자. 2> 웹 애플리케이션을 시작했을때 자동으로 input 태그로 커서를 위치시키자. 3> 입력을 하고 나서는 백스페이스를 입력할 필요가 없도록 입력한 값을 블록설정해주자. 이렇게 기능을 추가하는 과정에서는 코드가 추가도 되겠지만 삭제될 수도 있다. 엔터키로 입력할 것이니 더이상 버.. [Todolist_Basic] Step 2. 정적인 페이지를 어느 정도 동적으로 만들기 Step 2. 정적인 페이지를 어느 정도 동적으로 만들기 기본적인 틀을 어느 정도 잡았으니,input 태그로부터 값을 받아 append로 달아보자.그러기 위해서는 input 태그를 추가해야 한다. index.html code>12345678910111213 To do List New Item Colored by Color Scriptercs 그리고 이제 자바스크립트 코드를 보자. listItem.innerText 값에 Hello 대신에, input 태그로부터 들어온 값을 주면 될 것 같지 않은가? 일단 input 태그를 잡자. var inputText = document.getElementById(‘inputText’); 그리고 input 태그로부터 들어온 값을 받는다. 이때는 .value를 사용한다. .. [Todolist_Basic] Step 1. 기본적인 HTML / CSS / Javascript 구조 갖추기. Step 1. 기본적인 HTML/CSS/Javascript 구조 갖추기 우선, 웹 페이지 구성의 기초가 되는 html code를 구성해보자. index.html code>123456789 To do List New Item Write First item Colored by Color Scriptercs 현재는 체크 박스를 할 수 있고 없고 정도만 웹 페이지에서 우리가 할 수 있다. HTML 코드를 간략히 설명하면, To do List 라는 제목이 있고, 버튼을 추가했다. (id = “btnAdd”) 그리고 앞으로 li 태그를 추가해나갈, ul 태그를 삽입하고 id를 todolist라고 했다. 약간의 CSS를 입히고 시작하자. 그래야 진행되는 맛이 있으니까. style.css code>12345678910.. TodoList 만들기 Project_Basic Intro (HTML / CSS / JavaScript) 자바스크립트 연습 프로젝트 자바스크립트를 공부하면서 뭔가를 만들어보면서 하고 싶어졌는데,가장 유명한 것이 To do list를 만드는 것이다.검색해보니 난이도가 너무 높고, 이해도 안되고, (외국 사이트의 경우)심지어 코드를 그대로 입력했는데 동작하지 않았다.그러면서 여기 저기서 입수한 정보를 토대로 나만의 독자적인 To do list를 만들어가게 되었다. 이 포스팅은 그 프로젝트를 정리한 내용이다.정말 기초적인 내용을 연습하는 프로젝트이다. 프로젝트 대상은 누구인가?HTML과 CSS에 대한 기본적인 Markup Language에 대한 이해를 갖추주고 있고,JavaScript 이론 공부에 대해서 한 번 정도 진행된 사람 준비해야할 사항| Chrome Browser 프로젝트가 크롬을 기준으로 진행되기 때문.. [UX] 8. (최종) 프로젝트 회고 Design Project / 코딩보다 청춘 팀 / TripSynC 회고3개월에 걸친 프로젝트였다.목표는 프로토타입 제작까지였고 다행이 목표까지는 달성한 것 같다.생각보다 많은 교수님이 우리의 아이디어가 괜찮다고 한다.심지어 카카오톡에서 기획자로 일하고 계시는 분도 '해볼만하다'라고 하셨다.황송할 정도로의 극찬이었다.3개월의 고생으로 쌓인 피로가 다 날라갔다. 나는 이번 프로젝트를 통해 무엇을 경험하였고, 무엇을 얻었는가?1. 서비스를 보는 시각이 달라졌다. 어떤 새로운 서비스나 이용하던 서비스를 다른 시각에서도 볼 수 있게 되었다.의심을 품고 객관적인 시각으로 서비스를 깊게 보면정말 사용자의 입장에서 생각하고 만든 것일까의심이 들 정도로 이해가 안되는 방향으로 런칭되는 서비스들이 존재하고기존의 서비스의.. [UX] 7. 도출한 최종 아이디어 / Web 여행 전에 계획을 세울 때는 웹으로 많이 계획을 세우기 때문에, 계획 세우는 단계에서는 웹에서 대부분의 지원을 하기로 기획하였다. 핵심기능 1. 모듈(Module) 모듈이란, 일종의 여행 정보 집합체 같은 의미로 기획하는 서비스 전반에 있어서 가장 핵심부분을 차지한다. 작은 일정이라고 할 수 있으며, 모듈 안에는 여행지에 대한 위치, 여행지에서 소요되는 대략적인 시간과 비용, 주변 정보 그리고 그 여행지에 대한 다녀온 사람들의 평가가 담겨져 있다. 이 서비스를 이용하는 사람들은 이 모듈을 통해서 계획을 보다 손쉽게 세울 수 있다. 핵심기능 2. 계획표 인터페이스 제공 표를 만들고, 시간에 대한 고민을 하고, 이동에 걸리는 시간은 얼마인지 계산해야 하고, 여행을 준비하는데는 많은 정보들이 필요하다. 이러한.. [UX] 6. 구체적인 서비스의 방향 정하기 팀 단위로 본격적인 서비스 구체화를 위해 브레인 스토밍을 시작하였다. 우선, 여행 전, 중, 후에 대해 최종적인 문제점을 정리했다. 여행 계획을 세우는데 있어서 신뢰성 있는 정보,이 부분이 문제였다.신뢰성을 어떻게 보장할 것인가?많은 곳을 돌아보지 않아도 될 정도의 퀄리티를 제공할 수 있는가?그 사람의 여행을 책임질 수 있는가? 여행 중에 정보가 필요한 것은 맞다.하지만 데이터 사용에 어려움이 있다.우리나라가 유별나기 때문.조금만 느려도 난리가 나는 우리나라... 분명, 블로그에서 많은 정보를 얻는데,실제로 여행을 다녀온 사람들은 그 만큼 블로그에 글을 쓰지 않는다.도대체 글은 누가 쓰는거야?돈 받고?광고였단 말인가? 화이트 보드를 빌려 본격적으로 서비스를 구체화 해보자. 왜를 통해 접근해보자.우린 어떤.. [UX] 5. 2차 설문조사 분석 및 인사이트 도출 여행 중에 정보를 얻는 사람들은 두 가지로 분류계획을 많이 한 사람들은 여행 중에는 새로운 정보를 얻기보다는 여행 전에 조사했던 정보를 얻는다.계획을 별로 하지 않았던 사람들은 새로운 정보를 얻는다.이 두가지를 결정해야한다.어느 층을 공략할지. > — 데이터 1. 공공장소 와이파이를 이용한 사람들.(15명)여행 중 정보를 얻는 방법 : 현지인(8) 가이드북(4) / 블로그(1) 커뮤니티(2)현지에서 직접 얻은 정보가 신뢰도도 높고 다른 방법으로는 얻을 수 없는 정보들이 많다.현지에 도착하기 전에는 알 수가 없다는 단점의사소통이 매끄럽지 못한 경우가 존재시간이 소요된다.(생각보다)여행지에서 돌아다니면서 검색하는 것 자체가 여행에 집중하는 것을 방해하는 것 같다.편한 건 인터넷이 편하다. 하지만 인터넷 검색.. 이전 1 2 3 4 다음
