본문 바로가기

정진희

[Window Phone 7] 윈도우 폰 앱 제작 시리즈 - 03. 앱(App) 컨트롤 디자인하기1 안녕하세요? 세번째 시간입니다. 저번 시간에 전체적인 화면 구성을 그려보았습니다. 이번 시간에는 다음 강좌를 진행하겠습니다. 1. 윈도우 폰 앱을 만들기 위한 첫 단계, 화면 구성 하기 2. 블렌드에서 윈도우 폰 레이아웃 잡기 3. 화면 디자인 및 컨트롤 디자인 하기 4. (필요 시) 애니메이션 제작하기 5. 윈도우 폰의 시작 타일 및 페이지 전환 etc... 이번에는 컨텐트 영역에 들어가는 버튼들을 윈도우 폰에서 제공하는 디자인 외에 디자이너가 직접 나만의 버튼을 만들어 보겠습니다. 저번 시간에 이어 프로젝트를 진행하겠습니다. 1. 먼저 컨텐츠 전체에 적용 될 버튼을 디자인 해 보겠습니다. 블렌드에서 만들 수 있는 정도의 버튼 디자인이라면 포토샵에서 이미지를 가져오는 것 보다 직접 그려주는 것이 해상도.. 더보기
[Window Phone 7] 윈도우 폰 앱 제작 시리즈 - 01. UI 기획하기 안녕하세요? 정진희입니다. 오랫만에 글을 쓰게 됩니다. 요새 윈도우 폰에 대한 이슈와 궁금증이 많아 이렇게 시리즈로 온라인 강좌를 올려볼까 합니다. 오늘이 첫번째 시간이네요. 앞으로 진행 될 내용은 다음과 같습니다. 1. 윈도우 폰 앱을 만들기 위한 첫 단계, 화면 구성 하기 2. 블렌드에서 윈도우 폰 레이아웃 잡기 3. 화면 디자인 및 컨트롤 디자인 하기 4. (필요 시) 애니메이션 제작하기 5. 윈도우 폰의 시작 타일 및 페이지 전환 etc... 오늘은 첫번째 강좌를 올리도록 하겠습니다. 1. 앱을 디자인 하기 전 무엇을 만들지 머릿속에 그린 것을 드로잉이나 기획 툴로 구체적으로 만들도록 합니다. 블렌드에는 "스케치플로우"라는 블렌드 전용 기획 프로그램이 내재되어 있습니다. 이 툴을 사용하셔도 좋을 .. 더보기
익스프레션 블렌드 4 책이 출간됩니다. 거침없이 배우는 익스프레션 블렌드 오랫동안 준비했던 책이 드디어 곧 출간되는 소식을 들려드리고자 이렇게 포스트를 올립니다. 아직 정식출간은 되지 않았지만 예판이 시작되었으며 정식출간은 5/23일로 잡혀있습니다 :-D 작년부터 블렌드 강좌가 뜸했었던 이유가 이것 때문이라고 해도 변명을(;;;) 이제 책 나왔으니 강좌 또 바지런히 써볼게요 ㅎ 제 첫 출판이기 때문에 부족한 부분이 많지만, 많은 이해 부탁드립니다. 다시 한번 이 책에 도움주신 분들 감사드립니다. (감사글은 책 안에 :D) 책 구매 사이트 : Yes24 책 구매 11번가 책 구매 인터파크 책 구매 더보기
[코드파티] N스크린 시대의 개발자 전략 세미나 클릭하시면 세미나 신청이 가능합니다. 저는 개발자가 아니지만 디자이너로써 윈도우 폰 7에 대한 간단한 팁과 블렌드로 어떻게 작업하는지에 대해서 간단히 소개할 예정입니다. 더보기
[Expression Blend 4] Toggle 버튼으로 윈도우 최대화/기존화면 버튼 만들기 안녕하세요? 정진희입니다. 오랫만에 강좌를 쓰게 됩니다. 데스크탑 어플리케이션이나 디자인 된 윈도우 창을 보면 [닫기] [최대화] [최소화]의 모양이 디자인 된 것을 볼 수 있습니다. 이렇게요. 윈도우 창에 쓰는 버튼이 스타일화 된 모습 [닫기]버튼이나 [최소화] 버튼은 클릭되었을 시의 경우의 수만 만들어주면 되기 때문에 버튼으로 제작해도 상관없습니다. 하지만 여기서 문제인 것은 저 최대화 버튼인데요. 최대화를 클릭 하게 되면 이전 크기로 돌아오기 위한 상태의 모양도 만들어 주어야 합니다. 두가지의 경우를 만들어야 하는 [최대화]버튼 이럴 경우에는 버튼 컨트롤을 사용하지 않고 다른 컨트롤을 사용해 주어야 합니다. 바로! Toggle(토글) 버튼입니다. 이번 시간에는 위와 같이 토글 버튼을 제작하고, 최대.. 더보기
[웹공부기초] 골격을 만들기 위한 기본 선택자들 개발도 개발 영역에 따라 쪼개면 쪼갤 수록 관리하기 쉽다고 얘기를 하듯 디자인도 분업을 할 수록 훨씬 보기 좋다. (하지만 나는 좀 다양하게 해보고 싶을 뿐) 어쨌거나 웹표준의 준수했다고 할 만한 것은 구조(structure)와 표현(Experience) 동작(Behavior)으로 나뉘어야 된다고 한다. div와 CSS로 구조와 표현을 나누었다면 표현 격인 CSS도 스케일이 클 수록 분리 시키는 것이 권장된다. (1) CSS도 분업화할 수 있도록 만들어라 (큰 스케일 일때) Base.css - 기본 html 태그를 정의한다 (html/body/table/div등의) common.css - 공통 스타일 (a:linked/a:hover/a:actived 등의) layout.css - 특정 레이아웃의 태그를 .. 더보기
[웹공부기초] 메타태그로 내 홈페이지의 정보를 기입하기 잘 된 그리드 디자인이나 깔끔하게 코딩이 되어있는 홈페이지들을 훔쳐보던 중에 위에서부터 읽다보니 사이에 메타 네임(meta name)이 맨 먼저 보인다. 홈페이지에 대한 키워드를 읽어들인다는 역할은 대충 알고 있는데, 다양한 방식으로 쓰이는 것 같아 종류를 찾아보았다. (1) 메타 태그(meta tag)란? -자신의 홈페이지에 관한 정보를 메타태그를 통해 담아놓을 수 있다. 구글이나 검색 사이트에서 정보를 찾아주는 검색 로봇이 이 메타태그를 보고 찾아준단다. 메타태그를 잘 활용하면 내 홈페이지를 방문하는데 수월할 것이란다. 쓰는 방식은 사이에 삽입하면 된다. (2) 메타 태그의 종류 1) 홈페이지,혹은 페이지에 관한 정보를 설명하기 위한 태그 백악관 스크립션을 한번 긁어봤다. "WhiteHouse.gov.. 더보기
[웹공부기초] 웹표준 div와 CSS 살펴보기 웹에 관련된 회사에 다녔을 때 막무가내로 배웠던 HTML의 Table 기술을 탈피하기 위해 웹 표준화를 익히는 포스트를 하고자 합니다. (1) 원인 : 왜 Table을 사용하지 않고, div+css로 하는가? 링크 따라가기 : 레이아웃과 스타일을 따로 분류해서 보기 편하고 유지하기 쉽도록 제작하기 위해서 : 퍼포먼스에서 table보다 훨씬 빠르며, 값싸다 (외국에서는 바이트로 값을 낸다나) div : division - 구역, 구분, 분할 / div로 집의 골조를 만든다 CSS : 스타일 시트 / div로 만든 집에 색을 입히고 가구를 들여놓는다. (2) 스타일 지정방식 : CSS을 div에 첨부하는 방식 (작은범위에서 큰범위순으로) 1. 직접 스타일 지정하는 inline Style방식 - 이건 혼자만 .. 더보기
[Expression Blend Exhibition] 블판 전시가 마무리 되었습니다. 지난 10월 30일에 진행된 [Blpan] 행사가 마무리 되었습니다. 첫 회라 시행착오가 있었고 애초에 생각했던 규모와 준비기간 등이 변경이 되었지만 그래도 첫 발을 내 딛는 것이 제일 힘든 일인데 잘 끝낼 수 있었습니다. 총 8팀이 참여를 하였는데요, 각각 참신한 아이디어로 이루어져 있습니다. 특히 동적으로 사용자가 참여하는 작품들이 많아서 재미있었습니다. 위의 화면자료는 전시 준비에 총 관리를 해주신 양승철님이 준비해 주셨어요. 전시작품의 엽서들을 앞에 모아놨어요 준비가 약간 덜 된 전시회를 위해 기다려주시는 분들 감사감사! 1. 욕망이란 이름의 나무 - 사용자가 센서가 달린 막대를 가지고 나무에 달린 돈을 따는 참여 방식의 게임이었습니다. 막대를 흔드는 만큼 돈을 따는데, 돈을 얼마나 땄는지에 대한.. 더보기
[Expression Blend Exhibition] 익스프레션 블랜드로 판을 벌여보자! 블판 전시회 마이크로소프트사에서 디자인 툴로 출시한 프로그램인 익스프레션 블랜드를 사용하는 디자이너와 개발자가 모여 조그만 전시회 및 발표를 드디어 10월 30일에 하게 되었습니다. 사진 한가운데에 제일 쬐그만 저도 개발자와 함께 작품을 내게 되었습니다. 가벼운 마음으로 구경오세요 신청은 http://onoffmix.com/rsvp/1951 에서 받습니다, 많은 관심 가져주세요~_~ 더보기

티스토리툴바