본문 바로가기

Design

 (83)
개발자가 말하는 오프 더 레코드 아래의 내용은 개발자가 기획자 및 디자이너에게 이야기하는 개발자들이 업무를 처리하기 위해 어떻게 작업하는지를 간단히 설명해주는 문구로 코멘트적인 의미로 기록해 놓습니다. 개발자들과 협업을 하시는 분들은 참고하시면 좋을 것 같네요 :)  1. 기획과 디자인에서 개발에 대해 쉽게 생각하는 점은 간단한 점을 바꾸기 위한 내용이라고 생각하지만 간단한 수정사항이라도 쉽지 않고 어렵다. 2. 개발은 가설을 검증하는 단계로 실패와 도전을 통해 가설을 세우고 검증을 하는것이다. 3. 작업을 진행하는 프로세스는 다음과 같다. 3-1. 먼저 주어진 작업에 대한 목표를 수립한다 3-2. ​다양한 알고리즘을 생성한다 - 일 해결 과정에 대한 계획과 수립 및 실행을 동시에 진행한다. 3-3. 시행착오와 가설증빙을 통해서 하나씩..
윈도우 이모지 단축키 및 각 모바일 이모지 확인하기! 메신저 시장이 처음 도입될때 자주 쓰였던 이모지가 이모티콘 시장이 성장함에 따라서 많이 사라지는 모습을 모였다가 간간히 보이던 이모지가 요새는 자주 보이는 모습을 종종 볼 수 있습니다. ​ 왜일까요? 메신저 이모티콘은 다양한 이미지로 메신저에서 문장대신에 간편하게 쓰이는 요소로 각광받지만 텍스트기반의 이메일이나 HTML등의 문장으로 이루어진 웹 요소에는 적용할 수 없는 한계이기 때문인데요, ​ 특수문자로 웃거나 우는 표정을 표현하던 간단한 표현에서 한단계 발전해 ( 예: ^^,ㅠㅠ,@_@) 유니코드로 이루어진 이모지는 웹 영역 어디서든 사용 될 수 있는 자유로움과 딱딱한 텍스트에 하나의 포인트로 하여금 사용자가 친숙함을 느낄 수 있는 장점을 가지고 있기 때문입니다.😘 하지만 동일한 이모지라도 운영체제에 ..
플래시는 이제 쓰지마세요 (2020년 말 플래시와의 작별인사) 초창기 웹 시장에서 자연스러운 움직임과 가벼운 용량으로 많은 사랑을 받았던 플래시가 2020년 말 어도비에서 업데이트를 종료한다는 공식 발표를 내놓았습니다 2세대 웹 시장부터 코드없이 자연스러운 모션을 선사한다는 장점을 가져 화려한 연출인 모션 홈페이지와 프로그래밍을 심을 수 있던 점에서 정말 많이 애용했지만 (그 당시에는 따로 플래시 디자이너를 정말 많이 뽑기도 했었습니다) ​ 스마트폰의 보급으로 3세대의 일률적인 웹 표준을 거치면서 간단한 API와 css코드만으로 애니메이션을 구사 할 수 있게 되자 점점 이용하는 사람은 줄고 있었는데요. 아무런 제약없이 코드를 동작시키기 때문에 컴퓨터를 망가트릴수있는 악성코드를 심기 쉬운 타입이라는 점과 스마트폰에서의 출력이 불가하는 현상으로 빠르게 이용자가 떨어지고..
저작권 표시 cc 크리에이티브 커먼즈란? 웹 환경이 막 태동할 시점. 이용자들은 저작권에 대한 개념 없이 컨텐츠를 자유롭게 공유하고, 소비하며, 재생산이 되는 반복된 일련의 생활들을 즐기고 있었는데요, 초창기의 웹 시장과 오프라인 시장에서 저작권에 대한 인지가 뚜렷하지 않을 때는 문제가 수면 위로 떠오르지 않았지만, ​ 일반 사용자가 접하기 쉬운 플랫폼이라는 포털을 기반으로 한 다양한 컨텐츠를 접할 수 있는 환경이 마련된 지금은 자신이 행하는 모든 행위가 타인에게 컨텐츠로 소비되며, 금전적으로 이득을 취할 수 있는 개인 미디어 시대가 도래하였고, ​ 그로 인해, 일반적인 사용자들도 웹을 통한 자유로운 환경이나 오프라인의 컨텐츠를 활용하고 응용해 금전적인 취득을 진행할 때에 생길 수 있는 저작권의 개념에서 자유롭지 못한 시대가 되었습니다. ​ 이..
반응형 홈페이지 미디어 쿼리 기본 설명 (@media) 홈페이지를 하나의 레이아웃이 아닌 미디어에 따라 반응하는 형태로 변하게 만드는 별도의 작업을 미디어쿼리 또는 반응형 이라고 부르며, 이를 위한 작업으로 파생된 언어가 바로 웹퍼블리싱과 퍼블리셔입니다. 기존의 레이아웃으로 또 하나의 홈페이지가 미디어에서 다르게 보이는 현상을 말하고, 모두 이용자들을 위한 편의성에서 출발한 것인 만큼, UI,UX와도 밀접한 관계를 지니고 있습니다. 뷰포트 선언 미디어쿼리를 시작하기 전에 메타 태그를 통해 뷰포트적용(반응형 홈페이지) 선언문을 작성 해 줍니다. 이 과정을 건너뛰면 홈페이지가 반응형으로 적용되지 않습니다. 선언문과 관련한 내용은 이 곳을 클릭해 예전 포스팅을 확인 해 주세요. ▲ 각 요소들을 다 적고 제일 하단에 미디어 쿼리를 기술한 모습 body { backg..
홈페이지 레이아웃 제어와 영역 분배하기 (column) 각 컨테이너 요소들로 화면을 제어해 준 후, 다단을 나누어 해당 하는 넓이에 맞게 차례대로 컨텐츠를 나열하는 것을 칼럼(column)이라고 합니다. 쉽게 생각해 신문과 같은 나누어 기입하는 나열 형식을 말하는데, 웹 페이지에서 많이 쓰이는 이미지와 설명을 보기좋게 분야별로 나열하는 배치입니다. 이와 같은 칼럼은 아래와 같은 명령문으로 직접 나열하는 것을 제외하고, 그리드 형식인 부트스트랩 같은 자동 레이아웃을 rel속성으로 첨부해 도움을 받는 것이 훨씬 쉽고 간편한데, 그 전에 칼럼 속성의 의미를 인지하고 있어야 사용하기 편리합니다. column 행과 열 중에서, 열 속성을 지정하는 칼럼(column)은 줄여 col 이라는 표기로 통칭 많이 사용됩니다. 그리드라고 부르는 것이 좀 더 어감이 쉬운데, 홈페..
전환과 애니메이션 효과 (transition,animation) 앞서 설명한 변형효과(transform)와 같이 이어서 설명될 트랜지션(transition)은 정해진 시간동안 이동하거나 크기가 커지는 등 다양한 시각적 효과를 제공하는 기능입니다. 마우스를 올리면 버튼이 커진다거나 회전을 하는등의 다이나믹한 요소등을 많이 갖추고 있어, 간단하고 다양하게 사용됩니다. 자바스크립트와 플래시가 없어도 애니메이션의 무한 루프형태와 트랜지션을 활용해 간단한 이동 및 이펙트등의 효과를 보여줄 수 있습니다. ​ 사실 앞서 소개한 기능, 트랜지션이나 애니메이션등의 이동 툴은 각종 브라우저의 하위버전에서는 지원하지 않는 단점은 있습니다만, 최신버전이 아니면 더 이상의 지원과 패치등을 해주지 않는 업계의 특성과 트렌드를 반영해 크로스브라우징쪽만 신경쓴다면, 진행해도 큰 문제는 없다고 생..
홈페이지 그림자와 변형 효과 (shadow, transform) css로 줄 수 있는 정지된 컨테이너에 대한 효과는 그림자, 2D변형,3D변형, 3가지로 나뉘어져 있으며, 간단한 명령문 만으로도 이동시키거나 회전을 하는등의 모션을 줄 수 있어 간편하게 이동과 변환을 시키기에 용이한 기능입니다. 변형은 :hover 기능을 통해 클릭시 변환을 하게 하거나 주목성을 높이는 용도로 많이 사용하는 것은 물론, 이어서 포스팅될 전환효과에 변형을 합해 좀 더 다이나믹한 형태 변경을 위해 숙지해야되는 부분입니다. text-shadow 그림자 효과 코드는 수평, 수직, 블러효과, 색상으로 제어 할 수 있으며, 두 가지를 함께 그림자로 나타내는 효과도 부여할 수 있습니다. 두 가지 컬러는 ,(콤마)를 이용해 표기하면 됩니다. text-shadow: 수평, 수직, 블러강도, 색상; /*..

티스토리툴바