티스토리

뭉지일지

검색하기

블로그 홈

뭉지일지

moongji-record.tistory.com/m

뭉지야 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

WAI-ARIA # WAI-ARIA - WAI와 ARIA를 합친 단어이다. - WAI에서 발표한 RIA환경에서의 웹접근성 기술 규격이다. - 간단히 생각하면 !!! 웹 접근성을 향상시킬수 있는 방법 중의 하나이다! - WAI(web accessibility initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관 - ARIA(accessible rich internet applications): 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술 -RIA(rich internet applications): 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할수 있는 편리성+프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응.. 공감수 0 댓글수 0 2023. 3. 6.
웹 접근성 #웹 접근성(Web Accessibility) -일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할수있도록 보장하는 것을 뜻한다. 그러나 비장애인도 정보 접근에 제한을 받는 불편함을 겪을수있다. -웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는것. -웹 접근성을 갖추면 웹에 접근했을때 그 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장받을수있다. #웹 접근성 실태 -국내 온라인 쇼핑몰 사이트에 비하면 해외 쇼핑몰 사이트는 상품의 기본 정보가 모두 텍스트로 작성되어 있다. 또한 페이지에 첨부되어 있는 모든 이미지에 이미지를 설명하는 텍스트가 함께 작성되어 있다. -국내에서는 대부분의 .. 공감수 0 댓글수 0 2023. 3. 5.
SEO SEO(Search Engine Optimization) 검색엔진 최적화 -검색 엔진의 작동방식에 맞게 웹페이지를 최적화해주는 작업 -SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될수 있게끔 만들수 있다. #On-Page SEO - 페이지 내부에서 진행할수있는 SEO -제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML요소 사용법 등을 이용하는 방법이다. -요소와 요소는 SEO에 영향을 주는 수많은 요소중 일부일뿐이지만, 이처럼 웹페이지에서 사용하는 HTML요소의 종류와 요소에 들어가는 내용도 검색 결과에 영향을 준다. #Off-Page SEO -웹 사이트 외부에서 이루어지는 SEO -소셜 미디어홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법으로, 웹 페이지 내용이나 .. 공감수 0 댓글수 0 2023. 3. 4.
크로스 브라우징 # 크로스 브라우징(Cross Browsing) -웹사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할수 있도록 만드는 작업. 동일한이 아닌 동등한 !!! -크로스 브라우징의 목표는 모든 브라우저에서 동등한 수준의 정보와 기능을 제공하는 것이다. -인터넷 익스플로러의 퇴출로 크로스 브라우징의 난이도가 한결 낮아졌다. #크로스 브라우징 워크 플로우 1. 초기 기획 -초기기획단계에서 어떤 웹사이트를 만들것인지 정확하게 결정해야한다. (어떤 콘텐츠와 기능, 디자인 등..) -이사이트의 고객이 누구일지 (사용하는 브라우저는 무엇일지, 기기는 무엇일지) -고객에게 맞는 기술을 사용해서 개발할수있도록 기획해야한다. 2.개발 -코드의 호환성 확인. -코드를 작성하다보면 크로스 브라우징을 힘든 상.. 공감수 0 댓글수 0 2023. 3. 3.
자주 틀리는 마크업 1. 인라인 요소 안에 블록 요소 넣기 => 블록요소안에 인라인요소가 들어가라 -HTML 요소는 표시 방법에 따라 인라인 요소, 블록 요소로 나뉜다. -인라인요소는 콘텐츠가 차지하는 만큼만, 블록요소는 가로로 넓게 화면 영역을 차지. -대표적인 인라인 요소로는 , , 블록요소로는 , -인라인 요소는 항상 블록 요소안에 들어가야 한다. 반대의경우는 절대 안돼!!!! 2. , 요소 사용하기 => 요소와 요소를 사용해라 -는 글씨를 굵게 만들때, 는 글씨를 기울일때 -하지만 웹표준을 준수하기위해서는 이요소들을 사용하지 않는 것이 좋다. (시맨틱하지 않은 표현을 기준으로 이름이 지어진 요소이므로) -대신 요소와 요소를 사용해라(똑같은 스타일을 부여하면서 콘텐츠에 의미를 부여하므로) 글씨에 효과를 줌과 동시에 각.. 공감수 0 댓글수 0 2023. 3. 3.
시맨틱 HTML 시맨틱 HTML #웹표준에서는 HTML을 시맨틱학 작성하는 것의 중요성을 강조한다. #시멘틱 HTML = semantic + HTML semantic: 의미의, 의미가 있는 이라는 뜻의 영단어 HTML: 화면의 구조를 만드는 마크업 언어 #HTML이 의미를 갖는다?!?!?!?이게 무슨말인감!?!?!?!! 1.div와 span으로 화면 구성하기 -div와 span 두가지 요소만 알면 충분히 화면의 구조를 만들수있다. 어떤 역할을 하는지도 알아낼수있다. 하지만 확신할수는 없다. 화면이 어떤 구조로 나누어져있는지 까지만 알수있고, 어떤 내용이 들어갈지는 명시되어 있지 않기 때문이다. 2. 시맨틱 요소로 화면 구성하기 -div와 span 요소로만 화면을 구성했을때와 비교하면, 각.. 공감수 0 댓글수 0 2023. 3. 2.
웹 콘텐츠 접근성 지침 웹 콘텐츠 접근성 지침(웹 접근성을 잘 확보했는지 판단할 기준이 될수있는) 한국형 웹 콘텐츠 접근성 지침 2.1 -W3C이 웹 접근성 권고안인 ‘WCAG(Web Content Accessibility Guidelines) 2.0’을 기반으로 한국 실정에 맞게 조금 수정한거다. 인식의 용이성(Perceivable): 모든 콘텐츠는 사용자가 인식할수 있어야한다. 1. 적절한 대체 텍스트: 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할수 있도록 대체 텍스트를 제공해야한다. 시각적으로 화면을 인식할수없는 사용자 혹은 상황을 대비해서 대체 텍스트를 제공할 필요가 있다. -alt 속성 사용하기 배경 이미지와 같이 정보를 인식할 필요가 없는 경우에는 alt 값으로 빈 문자열을 주어 스크린 리더가 인식하지 않게 합니.. 공감수 0 댓글수 1 2023. 3. 1.
웹 표준 인터넷은 웹기반으로 작동한다 . => X 인터넷이 웹보다 더 포괄적인 개념이다. #인터넷 -전세계적으로 연결되어있는 컴퓨터 네트워크 통신망을 의미 -웹뿐만 아니라 온라인게임, 모바일 앱, 이메일 등 네트워크를 사용하는 다양한 서비스들을 모두 포함한다. #웹 -공간을 정의 -문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할수있는 공간이 웹이다. #웹표준 -각 브라우저마다 개발하는 등의 수고를 없애고 웹개발의 형식을 통일시킨것 -W3C(world wide web consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙 -사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할수있도록 하는 웹페이지 제작 기법을 담고있다. -웹 개발에 사용되는 .. 공감수 0 댓글수 0 2023. 2. 28.
Figma Figma -UI디자인 & 프로토타이밍 툴 -개인에게는 모든 기능을 무료로 제공하고있다. 특징 1.실시간 협업가능 -한 화면에서 여러명이 동시에 작업할수있는 기능을 제공한다. 2.다양한 환경 지원 -웹브라우저 기반 프로그램이기때문에 브라우저만 사용할수있다면 어떤 환경에서든 사용이 가능하다. -mac, window, linux 등 가리지 않는다. -필요에 따라 프로그램을 직접 설치해서 사용할수도 있다. 3.자동 저장 및 버전 관리 -자동저장기능을 제공한다. 히스토리기능도 있어 버전관리에도 유리하다 4.다양한 무료폰트 지원 -구글폰트를 활용할수있어 폰트를 별도로 설치할 필요가 없고, 폰트가 없어서 화면이 깨지는 현상도 발생하지 않는다. 구글폰트 이외에도 사용자 PC에 저장된 로컬폰트를 불러와서 사용할수도있다.. 공감수 0 댓글수 0 2023. 2. 15.
와이어프레임 & 프로토타입 와이어프레임과 프로토타입은 제품 개발 이전에 화면 구조를 설계하기 위해 작성하는 것이라는 공통점을 가진다. 작성시점, 작성목적 완전히 다르다 #와이어프레임(wireframe) - 선(wire)으로 틀(frame)을 잡는다 -제품 기획단계에서 페이지를 어떻게 구성할것인지 구조를 잡기위한 목적으로 만든다. -피델리티(fidelity): 와이어프레임을 표현할때의 품질수준을 표현하는 전문용어 1. Low Fidelity Wireframe (Lo-Fi Wireframe) -손으로 빠르게 그린 수준의 와이어프레임 -작성하는데 시간이 많이 들지 않아 수정하거나 새로운 의견을 반영하기 쉽다. -아이디어를 구체화 시키며 큰 그림을 잡는데 좋다. 2.Middle Fidelity Wireframe (Mid-Fi Wirefr.. 공감수 0 댓글수 0 2023. 2. 15.
UI/UX 사용성 평가 ui/ux사용성 평가기준중 하나인 제이콥 닐슨의 10가지 사용성 평가기준(Jakob’s Ten Usability Heuristics) *서비스중인 애플리케이션을 평가하기위한 목적으로도 사용할수있지만, 제품 설계 단계에서 더 완성도있는 애플리케이션을 기획하기 위해서도 사용할수있다. 10가지 원칙을 지속적으로 확인하면 사용성과 효율성을 크게 높일수있다. # 여기서 heuristic이란? -체험적인 이라는 뜻으로, 완벽한 지식 대신 직관과 경험을 활용하는 방법론을 말한다. 1.시스템 상태의 가시성(Visibility of system status) -합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 한다. -피드백이 존재하나요 / 피드백이 즉시 제공되나요 / 피드백이 .. 공감수 0 댓글수 0 2023. 2. 15.
User Flow #User Flow (사용자 흐름) -사용자가 제품에 진입한 시점을 시작으로 취할수있는 모든 행동을 뜻한다. -다이어그램을 그려서 정리한다. #User Flow 다이어그램 작성법 사용자흐름을 다이어그램으로 작성할때, 기본적으로 세가지 요소를 사용한다. 이외의 요소를 필요에 따라 추가하여 사용해도 좋지만, 이 세가지 요소는 거의 필수적으로 사용하게 됩니다. 1.직사각형: 사용자가 보게될 화면 (예: 회원가입페이지) 2.화살표: 직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 화살표 3.다이아몬드: 사용자가 취하게 될 행동 (예: 버튼클릭) #User Flow 다이어그램을 그리면 좋은 이유 1. 사용자 흐름상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할수있음 2. 있으면 좋은 기능을 발견하여 추가하거나.. 공감수 0 댓글수 0 2023. 2. 15.
UX의 7가지 요소 좋은 UX를 만드는 요소 => 피터 모빌의 벌집 모형에서 제시한 UX의 7가지 요소 1. 유용성(useful):사용가능한가 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소 2.사용성(usable): 사용하기 쉬운가 -제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소 -가능한 단순하면서 직관적이고 사용하기 쉬운 제품이나 서비스를 만들어야 한다. -ui 디자인 패턴과 연관 깊은 요소이다. 3.매력성(desirable): 매력적인가 -제품이 사용자들에게 매력적인가 -애플이 제품의 디자인 요소에 공을 들이고 감성 마케팅 전략을 사용한 것이 이 요소와 연관이 깊다. 4.신뢰성(credible): 신뢰할수있는가 -사용자가 제품이나 서비스를 믿고 사용할수있는가에 .. 공감수 0 댓글수 0 2023. 2. 15.
UI 레이아웃 그리드 - 수직, 수평으로 분할된 격자무늬를 뜻한다. -화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법이다. -웹디자인 분야에서는 화면을 세로로 몇개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템(Column Grid System)을 사용한다. -margin, column, gutter라는 세가지 요소로 구성된다. # margin -화면 양쪽의 여백 # column -콘텐츠가 위치하게 될 세로로 나누어진 영역이다. -표준적으로 핸드폰에서 4개, 태블릿에서 8개, pc에서는 12개의 컬럼으로 나눈다. -이미지 속 화면 크기의 구분선을 break point라고 한다. -상대단위를 사용하여 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋다. # Gutter -column.. 공감수 0 댓글수 0 2023. 2. 15.
UI 디자인 패턴 UI 디자인 패턴: 화면에 배치할수있는 자주 쓰이는 컴포넌트 #모달(Modal) -기존에 이용하던 화면 위에 오버레이 되는 창 (새로운 브라우저창을 띄우는것 아니다) -모달을 닫기 전에는 기존 화면과 상호작용할수없다. -닫기버튼, 혹은 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적이다. -팝업은 브라우저에 의해 강제로 막힐수있지만, 모달은 브라우저 설정에 영향을 받지 않아 꼭 보여주고싶은 내용은 모달을 사용하는게 좋다. #토글(Toggle) -on/off시 사용하는 스위치버튼 -시각적효과로 사용자가 토글의 상태를 직관적으로 알수있게 만들어야한다. -on/off처럼 옵션이 두개인경우 말고 여러개의 옵션으로도 가능하다. 단, 옵션의 개수가 너무 많다면 탭을 사용하는것을 고려해라. #탭(tab) -콘텐츠.. 공감수 0 댓글수 0 2023. 2. 15.
UI/UX 개념 # UI -user interface, 사용자 인터페이스 -사람들이 컴퓨터와 상호작용하는 시스템 -화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호작용하기 위한 시스템이므로 ui라고 볼수있다. # GUI -graphical user interface, 그래픽 사용자 인터페이스 -사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경 -예시: 운영체제(window, mac os)의 화면, 혹은 애플리케이션 화면 -프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미한다. # UX -User Experience, 사용자 경험 -사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험 - 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접.. 공감수 0 댓글수 0 2023. 2. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.