본문 바로가기

전체 글19

무료 한글(국문) 웹 폰트 베스트 7 & 무료 폰트 모음 사이트 베스트 5: 디자이너 필수 팁 아직도 웹사이트에 노토산스만 쓰시나요? 요즘 가독성 높고 예쁜 무료 폰트를 제공하는 곳들이 많습니다. 저만 쓰려고 모아둔 가독성도 높고 어느 웹사이트에나 잘 어울릴 만한 무료 웹 폰트 7가지 공개해 드립니다.웹 디자인에서 폰트는 정보 전달뿐만 아니라 웹사이트의 브랜드 아이덴티티와 사용자 경험에 있어서 고려해야 할 필수 요소인 거 아시죠? 혹시 더 체계적으로 알고 싶으시다면 웹 폰트에 대해 쓴 글을 한번 읽어보세요. 웹 폰트는 어떤 기준으로 선택할까?웹 폰트는 웹사이트에서 사용되는 텍스트에 적용되는 폰트로써 사용자의 컴퓨터에 폰트가 설치되어 있지 않아도 웹사이트에서 폰트를 볼 수 있고, 웹 폰트를 지정하지 않으면 각 브라우저나 시munhwa-salon.com 본인이 좋아하는 유료 폰트 아이템을 구매하는 것.. 디자인 + 웹 2024. 4. 27.
웹 폰트는 어떤 기준으로 선택할까? 웹 폰트는 웹사이트에서 사용되는 텍스트에 적용되는 폰트로써 사용자의 컴퓨터에 폰트가 설치되어 있지 않아도 웹사이트에서 폰트를 볼 수 있고, 웹 폰트를 지정하지 않으면 각 브라우저나 시스템에서 기본으로 제공되는 시스템 폰트로 보여지기 때문에 특정 디자인을 가늠하기 어려운데요. 그래서 웹 디자이너들은 해당 디자인에 맞게 웹 폰트를 쓰고 이것은 웹사이트의 시각적인 표현을 결정짓는 중요한 요소 중 하나입니다. 그렇다면 내 디자인에 잘 맞는 폰트는 어떻게 쓰는지 혹은 웹 폰트를 쓸 때 고려해야 할 것들은 무엇인지 알아보겠습니다.웹 폰트가 왜 중요하지? 꼭 써야하나?· 브랜딩과 시각적 일관성웹 폰트를 사용하여 브랜드의 시각적인 아이덴티티를 구축하고 강화할 수 있기 때문에 브랜드의 적절한 글꼴 선택은 사용자들에게 브.. 디자인 + 웹 2024. 4. 25.
웹 표준과 웹 접근성을 고려한 SEO 최적화 마크업 7가지 핵심 규칙: 웹 접근성 테스트하기 SEO란?SEO는 사용자 경험을 향상시키고 웹사이트의 검색 엔진 순위를 높이는 데 중요한 역할을 합니다. 사용자 경험을 고려한 웹 디자인과 SEO 최적화가 잘 이루어진 웹사이트는 검색 엔진 결과 페이지(SERP)에서 더 높은 순위를 차지할 수 있습니다.기본적으로 검색 엔진은 웹 표준과 웹 접근성에 맞춰 작업한 웹 사이트를 더 높게 평가합니다. 웹사이트의 SEO 기초와 최적화 방법SEO(Search Engine Optimization)는 웹사이트의 가시성을 높이고, 웹사이트를 검색 엔진에서 노출되도록 최적화하는 프로세스를 의미하며, 검색 엔진에서 상위에 노출되어 더 많은 사용자들이 웹사이트munhwa-salon.com SEO를 고려해서 마크업 하기웹 코딩을 할 때 웹 표준과 웹 접근성을 준수하기 위한 몇 .. 코딩 + 웹 2024. 4. 24.
2024년 혁신적인 웹디자인 트렌드 7가지 웹디자인 분야는 계속해서 발전하고 있으며, 새로운 기술과 사용자 요구사항에 맞춰 끊임없이 변화하고 있습니다. 2024년 웹 디자인의 경쟁은 더욱 치열해지면서 개성 넘치는 새로운 트렌드와 90년대 스타의 디자인들의 혼합이 두드러지며, 사용자 경험과 참여를 강조하는 추세입니다. 시네마틱 스크롤링과 같은 인상적인 애니메이션을 활용하여 브렌트 아이덴티티를 생생하게 표현함으로써 사용자에게 어필하고, 또 한편으로는 Bento 그리드 레이아웃과 같은 간단한 기술이지만 깔끔하고 현대적인 느낌을 주는 디자인을 강조하는 트렌드도 있습니다. 2024년에 주목할만한 트렌드가 어떤 것이 있는지 살펴보겠습니다.시네마틱 스크롤링(Cinematic Scrolling)시네마틱 스크롤링은 영화에서 영감을 받은 시각적 스토리텔링을 활용하.. 디자인 + 웹 2024. 4. 23.
TypeScript로 시작하는 웹 개발: 설치부터 예제 실행까지 TypeScript의 특징 및 장, 단점을 알았다면 이제 시작해 봐야겠지요? TypeScript를 어떻게 설치할지 알아보고 간단한 예제들을 통해 어떻게 시작할 수 있는지 확인해 보겠습니다. 일단 TypeScript를 사용하기 위해서는 먼저 Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다. 그 후, typeScript  컴파일러를 설치할 수 있습니다. 이제 시작합니다~혹시 TypeScript의 특징 및 장,단점을 아직 보지 못하셨다면 아래의 글에서 참고해 보세요. TypeScript를 이해하는 데 도움이 될 것입니다. JavaScript 개발자를 위한 TypeScript 입문: 타입 시스템과 활용법TypeScript는 Microsoft에서 2012년에 개발한 오픈 소.. 코딩 + 웹 2024. 4. 20.
JavaScript 개발자를 위한 TypeScript 입문: 타입 시스템과 활용법 TypeScript는 Microsoft에서 2012년에 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 확장된 정적 타입 문법을 추가한 것이 특징입니다. TypeScript는 코드 유지 보수성을 향상시키고 개발 생산성을 높이는 데 도움이 대규모 SI 프로젝트에서 자주 사용되며, 개발자들 사이에서 높은 인기를 끌고 있습니다. 이번 글을 통해서 TypeScript의 특징, 장,단점, 활용 등을 통해 TypeScript을 써야 할지 한번 고려해보시기 바랍니다.JavaScript 말고 TypeScriptJavaScript는 인터넷만큼 오래되었습니다.90년대에 대화형 웹 페이지를 만들기 위해 Netscape(Mozilla의 조상) 사람들은 Java와 유사한 구문을 사용하는 새로운 객체 지향 해석 언어를.. 코딩 + 웹 2024. 4. 19.
현대 웹 개발의 핵심, 프론트엔드 프레임워크 선택 가이드: React, Vue.js, Angular 비교 분석 프론트엔드 프레임워크는 웹 개발에서 사용되는 도구로, 웹 애플리케이션의 사용자 인터페이스(UI)를 구축하고 관리하는 데 도움을 줍니다. 여러 가지 프레임워크 중에서 React, Angular, Vue.js가 가장 널리 사용되는데, 각각의 특징과 활용을 프로젝트 규모, 학습 곡선, 성능 요구 사항, 커뮤니티 및 지원 고려사항 위주로 알아보겠습니다. 프론트엔드 개발은 웹 애플리케이션과 웹사이트의 사용자 인터페이스를 구축하는 과정입니다. 이 분야에서는 다양한 프레임워크가 사용되며, 각각의 프레임워크는 웹 개발의 효율성과 품질을 높이기 위해 개발되었고 현재도 많은 프레임워크가 개발되고 있습니다.처음 프론트엔드 개발자로 입문할 때, HTML, CSS, JavaScript 등 기본적인 것들에 추가하여 어떤 프레임 .. 코딩 + 웹 2024. 4. 18.
웹사이트의 SEO 기초와 최적화 방법 SEO(Search Engine Optimization)는 웹사이트의 가시성을 높이고, 웹사이트를 검색 엔진에서 노출되도록 최적화하는 프로세스를 의미하며, 검색 엔진에서 상위에 노출되어 더 많은 사용자들이 웹사이트에 방문하도록 하는 기술입니다. SEO는 기술적, 내용적, 그리고 사용자 경험적 측면을 포함하여 웹사이트를 최적화하는 다양한 방법을 포함하고, 이를 통해 웹사이트의 방문자 수를 늘리고 검색 엔진 결과 페이지(SERP)에서 더 높은 순위를 얻을 수 있습니다. 이 글에서는 웹사이트의 SEO의 기초와 최적화 방법에 대해 알아보겠습니다.SEO의 기초검색 엔진의 이해: SEO의 첫걸음은 검색 엔진이 어떻게 작동하는지 이해하는 것입니다. 사용자들이 검색사이트에서 원하는 키워드를 입력하고 검색을 하면, 검색.. 코딩 + 웹 2024. 4. 17.
웹사이트 헤더와 푸터 디자인의 중요성 웹사이트의 헤더(Header)와 푸터(Footer)는 방문자의 첫인상과 마지막 인상을 결정짓는 중요한 부분을 차지합니다. 헤더와 푸터는 웹사이트의 스타일과 디자인을 정의하고, 핵심 기능을 안내하고, 다른 페이지로의 링크를 제공하고, 로고 또는 웹사이트 이름 등을 나타냄으로써 브랜드의 이미지를 강화하는 역할을 합니다. 헤더와 푸터는 사용자가 정보를 빠르고 쉽게 찾을 수 있도록 도와주는 일관성 있는 디자인을 제공하는 것이 중요합니다.웹사이트 헤더(Header) 디자인의 중요성헤더는 웹사이트의 상단에 위치하며, 사용자의 시선을 가장 먼저 끄는 부분입니다. 헤더는 웹사이트의 로고, 검색 창, 메뉴 등이 위치하는 곳으로, 웹사이트의 정체성을 나타내는 중요한 요소 중 하나이기 때문에 웹사이트의 분위기와 목적을 전달.. 디자인 + 웹 2024. 4. 16.
웹 디자인의 시각적 디자인 원리와 기초 웹 디자인에서 시각적 디자인의 원리와 기초는 사용자 경험과 상호작용을 향상시키고 웹사이트의 효과적인 커뮤니케이션을 도와주는 데 중요한 역할을 합니다. 이러한 원리들은 웹사이트의 사용성, 접근성, 그리고 전반적인 미적 감각을 결정짓는 핵심 요소입니다.이번 글에서는 웹 디자인에 적용되는 주요 시각적 디자인 원리들을 자세히 살펴보겠습니다.웹 디자인의 핵심 시각적 디자인 원리균형(Balance)과 대비(Contrast): 웹 디자인에서 균형은 요소들이 페이지 내에서 조화롭게 배치되어야 함을 의미하며 대비는 색상, 크기, 형태 등을 통해 중요한 요소를 강조하고, 계층 구조를 명확히 하는 데 도움을 줍니다.계층 구조(Visual Hierarchy): 시각적 계층 구조는 사용자가 정보를 쉽게 이해하고, 중요한 요소에.. 디자인 + 웹 2024. 4. 16.
웹 디자인과 색상 값, 색상의 의미 지난 글에서 조사했듯이 색상이 웹 디자인을 이끈다고 해도 과언이 아니기 때문에 웹 디자인에서 색상 선택은 매우 중요합니다. 색상마다 느낌과 의미가 다 다르기 때문에 웹 사이트의 목적을 알리는 데 있어서 매우 유용하고, 웹 사이트 디자인을 시작할 때 좋은 아이디어를 얻는 데에도 효과적입니다. 웹 페이지의 색상은 특정 웹 사이트의 이미지와 브랜드 아이덴티티, 목적 등을 효과적으로 표현하기 때문에 색상을 선택하는 것이 중요합니다.이번 글에서는 색상이 가진 의미를 통해서 웹 사이트 색상을 어떻게 선택해야 할지 이야기해 보겠습니다.색채 이론과 웹디자인의 관련성 등 색상에 관련해서 더 자세히 알아보고 싶으시면 이 글을 한번 읽어보시고 오시면 더 좋습니다. 웹 디자인의 색상웹사이트에서의 색상은 웹사이트의 브랜드 정체.. 디자인 + 웹 2024. 4. 15.
색채 이론과 웹 디자인의 관련성 웹사이트에서의 색상은 웹사이트의 브랜드 정체성을 전달하고, 사용자의 주의를 끌며 정보의 우선순위를 설정하고 콘텐츠의 가시성과 가독성에 직접적으로 영향을 주는 데에 매우 중요한 역할을 합니다. 웹 디자인에서 색상은 단순히 미적 요소를 넘어 사용자 경험과 상호작용에 깊이 있는 영향을 미치기 때문에 색상을 사용하는 다양한 측면을 조사하고, 색상이 웹 디자인에 미치는 영향에 대해 살펴보겠습니다.색상 이론과 웹 디자인색상의 기본: 색상은 웹 사이트의 분위기와 느낌을 결정하기 때문에 사용자의 감정과 행동에 영향을 미칩니다. 색상 이론은 색상이 어떻게 조화를 이루고, 대비를 형성하며, 특정 감정을 유발하는지를 이해하는 데 도움을 줍니다.웹에서의 색상 사용: 웹 색상은 16진수 코드, HTML 색상 이름, CSS 색상.. 디자인 + 웹 2024. 4. 15.
사용자 경험(UX) 디자인의 중요성 사용자 경험(UX) 디자인은 웹사이트 또는 앱을 사용하는 사용자들이 느끼는 전반적인 경험을 개선하고 최적화하는 과정이고, 사용자가 느끼는 만족도, 편의성, 유용성 등을 중점적으로 고려하여 설계되며, 사용자의 관점에서 디자인하는 것을 목표로 합니다. 또한 사용자가 제품을 사용하면서 겪는 모든 상호작용을 포함하며, 디자인, 사용성, 기능성 등 다양한 요소가 포함됩니다. 이번 글에서는 사용자 경험 디자인의 중요성에 대해 알아보겠습니다.사용자 경험(UX) 디자인의 기본 개념· UX와 UI의 차이UX(사용자 경험) 디자인은 사용자가 제품을 사용하면서 느끼는 경험의 질에 초점을 맞추는 반면, UI(사용자 인터페이스) 디자인은 제품의 시각적 요소와 상호작용 디자인에 관련됩니다. 두 분야는 밀접하게 연결되어 있지만 각.. 디자인 + 웹 2024. 4. 14.
웹 디자인의 역사와 발전 웹 디자인의 역사와 발전은 인터넷과 웹 기술의 발전과 더불어 급속한 변화를 겪어왔습니다. 초기의 웹사이트는 단순한 텍스트와 하이퍼링크로 구성되어 있었으며, 사용자 경험이나 시각적 효과보다는 정보 전달에 중점을 두고 있었습니다. 하지만 1990년대 중 후반부터는 웹 브라우저의 보급과 함께 HTML(HyperText Markup Language)와 CSS(Cascading Style Sheets)의 발전으로 그래픽 사용이 가능해지면서 이미지와 색상이 웹 디자인에 도입되었습니다. 이러한 사회적 변화는 웹 디자이너들에게 새로운 시각적 표현의 다양성을 요구하게 되었습니다. 이 글에서는 웹 디자인의 역사와 발전 과정을 자세히 살펴보겠습니다.웹 디자인의 역사· 초기 웹 디자인웹 디자인의 역사는 20세기 초 WIMP .. 디자인 + 웹 2024. 4. 14.
색맹이란 무엇이고 색맹을 위해 웹 디자이너가 해야 할 일은 무엇일까요? 현대사회에서는 색을 제대로 인식하지 못하는 사람인 색맹이 증가하는 추세입니다. 평범한 사람들은 서로 같은 색을 인식하기 때문에 색맹을 이해하기란 쉽지 않습니다. 하지만 디자이너는 색맹의 어려움을 이해하고 그들이 일반 사람들과 같이 일상 생활에 자주 쓰는 디자인들 예를 들어 웹 디자인, 그래픽디자인 등을 잘 사용 할 수 있도록 분석하고 자신의 작업에 적극 활용해야 합니다.색맹의 개념색맹인 사람은 다양한 색을 구별하지 못하는 것이 특징인데 '색각 이상'이라고도 불립니다. 본질적으로 색맹은 유전으로 나타나기도 하지만 눈, 뇌 또는 신경의 손상이 되어 후천적으로 나타나는 경우도 많으며, 드물지만 특정 화학물질에 노출되는 경우에도 나타날 수 있습니다. 색맹은 단어적으로 눈의 이상을 나타내는 잘못된 용어지만 일반인.. 디자인 + 웹 2024. 4. 13.
창의적인 아이디어의 연구 사례 - 시각적 활용 능력 창의적인 아이디어의 연구 사례 중 하나인 시각적 활용 능력(Visual Literacy)의 6가지 요소를 통해 디자인의 창의적인 아이디어를 향상하는 방법에 대해 알아보겠습니다.사회는 정보 중심 사회로 점점 변화하면서 복잡해지고 경쟁이 치열해지고 있습니다. 기술과 지식은 사회와 함께 급속하게 변화하고 있기 때문에 현대 사회에서는 기본적인 요소로 창의성의 중요성이 강조되고 있습니다. 특히 디자이너에게는 이러한 과제를 해결해야 할 감성과 표현력뿐만 아니라 자신만의 독창적인 아이디어를 만들어내는 방법도 요구됩니다. 비주얼과 디지털 디자인을 위한 이론적 배경인 6가지 요소(이미지, 연상, 게슈탈트 심리학, 기호론, 시각적 유머, 디자인 원칙)를 통해 독창적인 아이디어를 도출하는 방법을 설명해 보겠습니다.창의적인 .. 디자인 + 웹 2024. 4. 12.
좌뇌 vs 우뇌의 적절한 이용을 통한 좋은 디자인 인간의 뇌는 인체의 중심이기 때문에 우리의 모든 것을 제어하고 통제합니다. 인간의 뇌는 주로학문적인 행동을 담당하는 왼쪽 뇌와 예술적인 능력을 담당하는 오른쪽 뇌로 이루어져 있습니다. 그렇다면 인간의 좌뇌와 우뇌는 얼마나 다르고 우리는 웹디자인에 이 다른 기능들을 어떻게 효과적으로 사용할 수 있을까요?좌뇌와 우뇌 이론우뇌-좌뇌 이론(The right brain-left brain theory)은 1981년 노벨상을 수상한 로저 W. 스펠리(Roger W. Sperry)에 연구로부터 세상에 알려지게 되었습니다. 로저의 이론에 따르면 인간은 좌뇌와 우뇌에 따라 서로 다른 사고의 타입을 가지게 되는데, 좌뇌형 사람은 더 분석적이고 논리적이며 언어, 단어, 기호, 숫자에 강하고 우뇌형 사람은 시각적인 부분, 이.. 디자인 + 웹 2024. 4. 11.
창의적인 사고와 웹 디자인 (2) 창의적의 사고가 웹 디자인을 하는데 왜 중요한지에 대해서 알아보았습니다. 이번 글은 창의적인 사고를 통한 아이디어를 도출해 내는 과정과 기법에 대해 소개합니다.이전 글을 보시지 않았다면 창의적인 사고의 중요성에 대해 보시고 오셔도 좋을 것 같습니다. 창의적인 사고와 웹 디자인 (1)창의적인 사고와 웹 디자인 웹 디자인의 핵심적인 이슈는 얼마나 독창적으로 웹과 이미지를 구성하여 방문자나 사용자에게 더 나은 서비스를 제공하느냐일 것입니다. 사회는 변화하고 복잡해trivia-to-know.tistory.com아이디어 생성 기법아이디어 생성 기법은 아이디어를 발전시키는 다양한 관점과 접근 방식으로 다양한 분야에서 연구되어 왔습니다. 이론적 배경을 바탕으로 이미지, 연상, 형태 심리학, 기호학, 시각적 유머 및 .. 디자인 + 웹 2024. 4. 9.
창의적인 사고와 웹 디자인 (1) 창의적인 사고와 웹 디자인웹 디자인의 핵심적인 이슈는 얼마나 독창적으로 웹과 이미지를 구성하여 방문자나 사용자에게 더 나은 서비스를 제공하느냐일 것입니다. 사회는 변화하고 복잡해지고 경쟁은 심화되었으며, 기술과 지식은 사회와 함께 빠르게 변화하고 있습니다. 이러한 이유로 사람들은 현재 상황에서 중요한 기반 중 하나로써 창의성을 키울 필요가 있습니다. 특히 디자이너들은 이러한 문제를 해결해야 하는 사람으로서 감성과 표현력뿐만 아니라 독창적인 아이디어를 창출할 수 있는 방법을 갖추어야 합니다. 웹디자이너에게 창의적인 사고란?사회의 전례 없이 급격한 변화에 따른 기술과 지식의 발전은 21세기의 중요한 특징 중 하나입니다. 이러한 상황에서 창의적 기술은 우리가 가져야 할 중요한 지식이라고 할 수 있겠습니다. 더.. 디자인 + 웹 2024. 4. 8.

티스토리툴바