본문 바로가기

Road to Web Developer

 (31)
아토믹 디자인Atomic Design 개요 우리는 페이지를 디자인하는 것이 아니라, 구성 요소 시스템을 디자인한다. 웹 생태계가 점점 커져감에 따라, 웹사이트는 단순한 온라인 문서가 아닌 하나의 거대한 서비스로 거듭나고 있다. 이제 단순한 웹 페이지 모음을 만드는 수준이 아니라서 현업 종사자들은 효율적인 업무를 위한 디자인 시스템 개발 필요성을 인식하고 있는 단계다. 특히 대형 프로젝트에서의 디자인 시스템 필요성은 더욱 부각되고 있는데, 많은 논의가 오가고 있는 주제다. 그중 많은 부분에서 색상Color, 글꼴Typography, 격자Grid 등 기초를 설정하는 데 중점을 두고 있다. 이런 논의는 확실히 중요하지만 디자인은 주관적인 영역이 커서 상대적으로 관심을 덜 받고 있다. 하지만 디자이너-퍼블리셔-프런트 개발자 간에 효율적인 소통과 원활한 ..
웹 개발자가 알아두면 좋은 SPA, MPA 당신이 웹 퍼블리셔, 프론트엔드 개발자가 아니더라도 웹 개발 분야에 있다면 SPA (Single Page Application) 혹은 MPA (Multi Page Application)에 대해서 들어본 적이 있을 거다. 처음 들어본다고? 괜찮다. SPA, MPA가 무엇인지 소개할 예정이다. 들어가기 전에 앞서 선행학습으로, 지겨운 방법론 두 가지를 짚고 넘어가고자 한다. 2계층 구조 (2 Tier Architecture Structure) 과거 대부분의 웹사이트는 2계층 구조로 개발되어있다. 2계층 구조란, 화면이 보여지는 클라이언트(Client)와 데이터베이스(DB)가 물리적으로 분리되어 있는 것을 뜻하며, 클라이언트에는 UI (User Interface)와 비즈니스 로직Business Logic이 함..
브라우저의 동작 원리 자바스크립트를 본격적으로 공부하기에 앞서, 브라우저의 동작 원리도 알아두면 좋다. 당신이 자바스크립트를 공부하려는 이유는 무엇인가? 더 나은 웹사이트를 만들기 위해서, 혹은 더 나은 자바스크립트 개발자가 되기 위해서일 거다. 그렇다면 자바스크립트가 주로 쓰이는 브라우저가 어떻게 동작하는지 알아두는 편이 좋다. 자바스크립트는 구글의 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(Runtime Environment)인 Node.js의 등장으로, 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용되는 범용 개발 언어가 되었다. 하지만 자바스크립트가 가장 많이 사용되는 분야는 역시 웹 브라우저 환경에서 동작하는 웹 페이지/애플리케이션이다. 대부분의 프로그래밍 언어는 운영체제(..
프로그래밍이란? 자바스크립트 카테고리에서 갑자기 프로그래밍이 나와서 당황했는가? 당황할 필요 없다. 자바스크립트는 프로그래밍 언어 중 하나일 뿐이며, 자바스크립트를 잘 이해하기 위해서는 프로그래밍에 대한 개념과 이론을 알고 공부하는 것이 좋다. 따라서 당신이 자바스크립트를 배우는 첫 걸음을 조금이나마 쉽게 뗄 수 있도록 개념적인 이해를 돕고, 프로그래밍에 필요한 핵심 요소들을 먼저 설명한 뒤 자바스크립트 문법, 예제 등을 소개하고자 한다. 우선 프로그래밍에 대해 알아보도록 하자. 프로그래밍이란, 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 이를 위해 먼저 무엇을 실행하기 원하는지에 대한 정의가 필요하다. 다시 말해, 프로그래밍에 앞서 문제(요구사항)를 명확히 이해한 후 적절한 문제 해결 방안의 정의가 필요하다. ..
시맨틱 웹 (Semantic Web), 시맨틱 태그 (Semantic Tag) 대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 구글Google이나 네이버Naver 같은 검색사이트를 이용한다. “나는 검색된다. 고로 존재한다”는 말이 있을 정도로 웹사이트는 검색엔진에의 노출이 매우 중요하다. 당연한 것이 검색엔진에 노출되지 않는 웹사이트에는 접속하는 이도 없기 때문이다. 검색엔진은 이 시대의 가장 강력한 권력 중의 하나라고 말할 수도 있겠다. SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로 부터 시작된다. 검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의..
티스토리 블로그, 네이버 검색에 나타나게 적용하기 당신은 티스토리 블로그를 운영하기 위해 개설했다. 그 목적이 광고를 통한 수익을 얻는 것이든, 취미로 글을 쓰는 것이든 당신의 블로그에 많은 유저들이 들어오길 바랄 거다. 적지 않는 시간과 노력을 투자해 쓴 글이 조회 수가 별로 높지 않다면 글을 쓰는 게 재미가 없어질 수도 있다. 그렇다면 당신의 블로그는 어디에 노출되는 게 가장 이상적일까? 우리나라의 검색엔진 시장은 네이버가 장악하고 있다고 해도 과언이 아니다. 다만 해를 거듭할 수록 구글이 네이버를 따라잡고 있는 추세이긴 하다. 하지만 여전히 60%에 육박하는 점유율을 가지고 있는 만큼, 네이버에 노출되는 것은 블로그나 홈페이지를 운영하는 사람들에게 매우 중요하다. 물론 2위로 치고 올라온 구글Google에 노출되는 것도 중요하니, 이 부분도 신경 ..
Javascript, 왜 중요한가? HTML, CSS, Javascript (이하 자바스크립트)는 웹사이트 개발에서 떼려야 뗄 수 없는 존재들이다. HTML이 없으면 사이트의 골격을 만들 수 없고, CSS가 없으면 멋지게 보이는 사이트를 만들 수 없다. 자바스크립트가 없으면 무슨 문제가 있을까. 자바스크립트 없이 웹사이트를 만들게 되면, 그 사이트는 단순한 웹 문서에 지나지 않는다. 그저 눈으로 읽고 보는 수준에 그치게 된다. 이는 웹사이트를 사용하는 사용자들에게 굉장히 지루한 경험이 될 거다. 예전에는 인터넷 속도나 컴퓨터 사양 등의 문제로 애니메이션이나 기능을 최소화했지만, 지금은 그런 부분들이 많이 해소되어 다양한 애니메이션과 기능을 활용해 사용자들에게 흥미롭고 재미있는 경험을 제공하고 있다. - 애니메이션과 기능을 활용해 홍보용 페..
CSS 변수 선언하기 필자가 햇병아리 시절, CSS를 사용하며 많은 불편함을 느꼈던 것 중 하나는 색상 값을 #FFFFFF 혹은 rgb(255,255,255) 처럼 16진수나 RGB 값으로 입력해줘야 했던 것이다. 웹 퍼블리싱을 하다보면 색상 값을 잊어먹을 때가 종종 있다. 물론 LESS나 SASS(SCSS) (이하 전처리기)를 쓰게 되면서 이 부분은 해소되었지만 설정을 해야 하는 불편함도 있고, 전처리기를 사용하지 않으면 변수를 어떻게 선언할지 모르는 문제가 있었다. 왜 색상 값을 그냥 쓰지 않고 변수에 집착할까? .text { color:#000000; } .text { color:black; } 위 코드를 보았을 때, 어느 색상 값이 더 외우기 편한가? 개인마다 편차는 있겠지만 대부분 단어로 된 경우가 더 외우기 쉬울 ..

티스토리툴바