본문 바로가기

반응형

분류 전체보기

(72)
git-sketch-plugin 사용후기 git-sketch-plugin 이번에 깃헙과 스케치를 연동하는 플러그인이 나왔다는 소식을 접해서 잠들어있던 깃헙을 깨우는 겸 사용해보았다.개인적으로 원했던 기능이 커밋된 지점에서 그 파일을 다시 불러오는 기능이었는데 깃헙 데스크탑엔 그 기능이 없어서 소스트리로 변경!아무래도 인터페이스나 사용 방법이 익숙치 않아 개발자의 힘을 빌어서야 세팅할 수 있었다. 작업을 한 뒤, 깃헙에 올리면 위 그림과 같이 이전, 이후로 작업된 화면을 비교해준다.깃헙을 이제 막 사용해보려는 유저로서 텍스트로만 이루어진 화면에 기 죽으며 끄는 경우가 종종 있었는데,그 허들을 조금 낮춰주는 플러그인이다. 비교 이미지가 생겨서 커밋 지점을 찾기가 훨씬 수월해졌다. 사용해보면서 느낀 불편한 점은 두 가지.1) 내 로컬 파일에서 미리보..
이미지를 폴리곤화해주는 사이트_triangulator 폴리곤이미지 만들기http://somestuff.ru/filter/HTML5/I 폴리곤이미지를 만드는데 손이 꽤 많이 가는 편이다.폴리곤이미지를 손쉽게 만들 수 있는 방법이 있다길래 냉큼 사용해보았다. 튜토리얼은 이 동영상을 보면 되고, 하단에 here 링크를 통해 다운로드받는다. 다운로드 받은 폴더안에 index.html을 열면 위와 같은 것이 열린다. Drop your bitmap here영역에 이미지를 던져넣고 작업을 시작한다. 테스트용으로 만들어본 수달이미지. 이미지를 넣자마자 자동으로 만들어주는 것은 아니고 어느정도는 클릭클릭으로 영역지정은 해야한다.하지만 쉐잎을 자동으로 쪼개주고 밑단에 깔린 이미지를 토대로 그라데이션을 깔아주므로 한땀한땀 그리는 것보다는 훨씬 수월하다.다만 복잡한 사진에는 쉐..
UX&UI 기획 1강 사용자경험(UX)의 개념과 이해사용자경험은 사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하게 되는 지각과 반응, 행동 등의 총체적 경험사용자경험을 정의하는 주요 키워드: 사용, 인지와 반응, 인지와 반응의 대상은 제품에 국한되지 않고 서비스와 브랜드 등으로 확장된 포괄적인 개념 사용자경험은 특정 영역을 갖기보다 기존의 다양한 분야와 결합되는 새로운 틀을 제공하는 접근으로 확장되고 있다.단순하게 인터페이스만이 아니라 제품, 시스템, 서비스, 회사 등 사용자가 특정 포인트를 중심으로 경험할 수 있는 대상으로 확장 기본적으로 UX는 사용하는 인간의 감정(느낌)과 생각 그리고 효용에 관한 것을 다룬다. 때문에 UX는 궁극적으로 인간에 종속된 개념이며, 주변의 환경 변화와 맥락, 그리..
UX&UI 기획 11강 UI 스토리보드 작성과 UI 상세설계 가이드 *스토리보드(Storyboard)UX 구현에 수반되는 사용자와 태스크, 인터페이스 간 상호작용을 시각화하여, 개발자/디자이너와의 의사소통을 돕는 도구이자완성해야 할 앱비스와 예상되는 사용자경험을 미리 보기 위한 방법론 기본적으로 그림을 통해서 전반적인 이야기를 전달 *스토리보드의 목적앱 설계에 필요한 조각들을 모아서 순서대로 놓고, 배치해보고, 쌓아서 조립해나가는 과정실제 개발 단계에서 발생할 수 있는 문제점을 미리 발견하고 대처하기 위한 과정 *스토리보드의 활용UX 스토리보드의 작성 프로세스사용자 시나리오를 시각화하면서 평가(사용자경험이 어떻게 전달되는지)하는 과정을 거친다.사용자 Task에 따른 세부적인 기능들 간의 흐름과 관계망을 파악할 수 있다. UX ..
HTML5&CSS3 기초 4강 페이지 레이아웃 설정 태그 Block 타입: 개행하지 않아도 Block처럼 쌓인다. , 태그Inline 타입: 을 쓰지않으면 계속 쌓인다. 태그 태그Block 타입의 대표적 태그웹 문서의 레이아웃 설정용도로 많이 쓴다. 태그Inline 타입의 대표적 태그웹 문서에서 특정한 의미를 나타내지 않는다.홍길동안녕 을 써도 웹페이지에서는 동일하여 '홍길동안녕'으로 출력된다.나중에 span으로 묶은 영역을 css주기 위한 용도로 쓴다. 시멘틱태그검색엔진이 보다 효율적으로 검색할 수 있게 특정태그를 사용해서 웹문서를 제작하는 것을 시멘틱 웹이라 한다.검색담당 서버 = 검색엔진검색엔진은 데이터 수집,검색 등을 하는데 데이터가 너무 많아지기 시작함에 따라 비효율적이 되었다그래서 홈페이지 header에 검색내용을 추가하여..
HTML5&CSS3 기초 4강 관련 태그사용자의 정보를 서버로 전달하기 위한 태그태그 : 데이터 처리 문서의 주소와 데이터 전달 방식을 속성으로 갖는다.태그 : type 속성을 이용해서 사용자의 다양한 정보를 얻는다.-디자이너와 퍼블리셔는 폼 관련 태그를 디자인에 중점을 두지만, 웹 프로그래머는 데이터 처리에 중점을 둔다. form태그는 서버의 url 정보를 가져야한다.method로 어떻게 전송할 것인지 정하며 GET, POST 방식이 있다.GET방식은 해당 url 뒤에 정보가 더해져서 날아가기 때문에 보안에 취약하다.POST방식으로 아이디, 비밀번호 등을 다루며 문서 헤더에서 암호화된다.주소 부분에는 정보가 보내질 타겟 url이 들어간다. method 부분에 전송방식을 입력한다. 이름name부분에는 서버에서 받는 식별값이기 때문에 ..
HTML5&CSS3 기초 3강 목록 관련 태그 태그 순서가 있는 목록목록의 아이템은 태그 사용태그순서가 없는 목록목록의 아이템은 태그 사용이 두가지를 보편적으로 쓰지만 dl,dt,dd 태그도 쓴다. 메뉴리스트 블라블라dt는 목록제목을 쓸 때 쓴다. 네이버 검색창 밑에 녹색 리스트도 이러한 것을 사용한 것뉴스가 나오는 것도 텍스트대신 이미지를 리스트로 나열한 것이다. 테이블 태그표를 나타내는 태그 내부에 ,등으로 내용을 표현은 행, 는 열을 뜻한다과거에는 웹 문서의 전체적인 레이아웃을 만들 때 썼으나 웹 표준 시대에는 회원가입, 게시판, 설문조사 등에 사용border는 선두께 는 head의 h 약자로 첫 행에 주로 쓰며 td보다 볼드한 폰트로 처리된다. 2개의 열를 하나로 합친다. 3개의 행을 합친다실무에서는 하나를 만들어두면 웹 프로..
HTML5&CSS3 기초 2강 HTML 태그, 속성 및 전체적인 구조HTML 문서는 '태그'로 구성HTML 문서의 뼈대는 HTML, head, body로 구성body 태그 안에 실제 웹문서에 표현되는 수많은 태그가 들어간다.n개의 태그가 모여 웹문서가 된다.태그는 시작태그와 종료태그 로 구성되고 태그는 속성을 가진다. (종료태그가 없는 태그도 있음) 구글로 가기 a는 태그, href는 속성. ""안에 들어가는 건 속성값. 는 개행을 해주는 태그인데 종료태그가 따로 없음(나홀로 태그)는 내용구분을 짓는 구분선 주석HTML 문서가 브러우저를 통해 출력될 때 노출되지 않는 것으로 프로그래밍 설명문. 추후 발생되는 디버깅, 유지보수에 대한 가이드 HTML 문서 구조DOCTYPE, html, head, meta, title, body로 구성h..
모바일 GUI 기초 3강 서비스 목적과 사용자의 이해1. 서비스의 목적브랜드 서비스, 유틸리티, 콘텐츠 서비스, 게임 등의 속성을 정하고 프로젝트 존재 이유를 명확히 한다.그리하면 기능,구조도 명확히 나오고 구체적인 상황에 효과적인 솔루션을 제공할 수 있게 된다. 2. 카테고리적 특성 파악(1) 쇼핑, SNS 등 카테고리에 따라 사람들이 일반적으로 생각할 수 있는 구조, 레이아웃, 컬러 등의 특성을 결합사용성에 영향을 끼치게 된다.(2) 모바일 특성과 사용자들이 쓰는 환경을 고려한다.예를 들어 김기사 앱과 아이나비 빌트인 네비게이션을 비교하였는데어두운 환경에서는 화면도 어둡게, 밝은 화면에서는 밝은 화면을 제공하여야한다그러나 김기사(리뉴얼전)에는 이러한 것을 제공하지 않아 사용자들이 터널에 들어가거나 하는 상황에서 불편을 겪음아..
모바일 GUI 기초 2강 1. 모바일 구성 요소와 디자인 프로세스프로젝트의 목표 매출 목표 외에도 달성하고자하는 목표(다운로드 수, 긍정적인 리뷰 수 등) 모바일 서비스를 개발/디자인/기획을 하기 위해 기술 이슈, 비용 이슈, 법적 이슈 등 다양한 요소들에 대해서 이해할 필요가 있음 각 요소들을 하나씩 구성하여, 프로젝트가 성공할 수 있도록 각 구성 요소를 이해하고 대응할 필요가 있음 2. UX,UI,GUI 구체적인 사용자에게 어떠한 경험, 콘텐츠, 기능, 디자인을 제공할 것인지 고민하고 적용하는 영역 모바일 서비스를 만드는 데 있어, 누구를 사용자로 할 것이며, 대상에게 어떠한 경험, 콘텐츠, 기능, 디자인을 제공할 것인지를 고민하고 적용하는 영역으로 UX/UI/GUI의 개념을 이해해야 한다. 이론적인 부분은 물론, 실무적인 ..

반응형