새로운 시작을 응원하며 보낸 선물 Java 강의 무료 + 모든 강의 30% 커리어에 대한 우리의 고민은 끊임없이 이어집니다.준비하고 있는 이에게도,먼저 그 길을 걸어간 김영한님에게도.긴 고민 끝에, 보다 '가치 있는 일'에 집중하고자용기 내어 내딛는 김영한님의 첫걸음 🤗 '시작'을 지원하는 일     🥹 '시작'은 어렵기 마련이니까 무언가를 시작할 때 밀려오는 막연함으로어떤 것을 어디서부터, 어떻게 시작해야 할지 고민한 적이 있나요? 꽉 막힌 벽처럼 느껴지는 첫 시작,그 '시작'을 확실하게 도와드릴게요.그저 이끄는 대로 따라만 오세요.     Java에 첫걸음을 내딛는 여러분께탄탄한 초석이 되어줄 강의를무료로 선물합니다. 도움 받아 시작하고,막힘 없이 쭉 - 성장하세요.   선물 1️⃣  Java, 꽉 Java!!! 단순 자바 문법이 아닌,어떤 상황에 왜 써야 하는지 제대로 알고 싶고진짜 실무에 필요한 '기본기'가 탄탄히 갖춰진실력 있는 개발자를 꿈꾼다면!    무료로 수강하기 👉    선물 2️⃣  모두 30% 할인     지금 할인 받기 👉    김영한님의 선물, 2023년 12월 7일(목)까지만 드려요 :)       ⛳️ 제대로 된 시작은우리를 바른 길로 인도합니다. 30만 명이 선택하고 인정한 김영한님의 강의로탄탄하게 시작하시고, 탄탄대로 걸어가세요!    

알면 더 잘 보이는 폰트 속 디테일 #폰트 #글꼴 #디자인 #타이포그래피 우리는 하루에도 수만 개의 글자를 마주치죠. 각각의 글자는 한데 모여 정보를 전하고, 때로는 생김새 자체로 사람들의 시선을 사로잡기도 해요. 65번째 인프메이션에서는 글자의 옷이라고도 할 수 있는 폰트(Font)의 이모저모를 살펴봅니다. 폰트마다 지닌 여러 특징과 다양성을 알아보고 나면, 평소에 스쳐 지나가던 글자 속 숨은 개성과 미묘한 뉘앙스를 더 재미있게 눈여겨볼 수 있을 거예요. 지난 10월 여기어때는 2018년 한글날 배포했던 ‘여기어때 잘난체’를 업그레이드하며 신규 폰트 ‘잘난체 고딕’을 함께 공개했어요. 들어가기 전에 : 폰트? 타입페이스? ✅ 인프메이션 #65에서는 편의를 고려해 폰트(Font)와 타입페이스(Typeface)를 통틀어 ‘폰트’ 내지 ‘글꼴’로 적고 있어요. 다만 타이포그래피 분야에서 폰트와 타입페이스는 엄밀하게는 서로 다른 개념입니다. 타입(Type) 활자 단위의 모든 글자 폰트(Font) 특정한 크기, 굵기, 스타일로 구체화된 활자(타입)의 집합 타입페이스(Typeface) 일정한 체계에 따라 같은 생김새를 가진 글자꼴의 집합 폰트 패밀리(Font-Family) 생김새가 같은 (동일 타입페이스에 속하는) 글자꼴의 굵기, 기울기 등 변화를 준 형태를 모은 것 오늘날 출판/디자인 작업의 중심이 활판 인쇄에서 디지털로 옮겨가면서, 대중적인 의미에서는 폰트와 타입페이스의 구분이 거의 흐려졌어요. ‘폰트’라는 단어 자체가 일정한 생김새를 가진 서체 즉 타입페이스를 가리키는 방식으로 혼용되기도 하죠. 때문에 이 글에서 가리키는 ‘폰트’ 역시 폰트와 타입페이스를 통용하는 방식으로 쓰였다는 점을 참고해주세요. 인프메이션 #65 🌿 한 벌의 폰트는 어떻게 구성되는 걸까? 누구나 알아야 할 폰트 기본 상식!  왜 어떤 글자는 서로 닮았을까?폰트 분류 알아보기 제각기 다르게 생긴 폰트의 가짓수만큼이나 폰트를 분류하는 방법도 무척 다양한데요. 디지털 디스플레이 시대로 접어든 오늘날에도 널리 쓰이고 있는 몇 가지 기준을 꼽아볼게요. 1) 삐침(부리) 여부 : 세리프(Serif) & 산세리프(Sans-Serif) 세리프 (Serif) 글자 획 끝에 삐침(Serif)이 달린 글꼴이에요. 삐침이 시선을 유도하는 역할을 해줘 가독성이 좋아요. 책, 신문, 잡지처럼 긴 내용을 전달해야 하는 인쇄물 본문에 많이 쓰여요. 전통적이고 고전적이며 우아한 느낌을 줘요. 한글 폰트라면 바탕, 명조, 부리 등으로 구분된 폰트가 여기에 속하죠. 산세리프 (Sans-Serif) 획 끝에 삐침(Serif)이 없는 글꼴이에요. 획의 굵기가 일정해 깔끔하고 간결한 형태를 띄어요. 디스플레이 해상도가 나쁘던 시절에는 세리프 글꼴에 비해 디지털 환경에서 가독성 높게 표현하기 쉬웠어요. 단단하고 현대적이며 깨끗한 인상을 띠어요. 한글 폰트라면 돋움, 민부리, 고딕 등으로 구분된 폰트가 여기에 속해요. 물론 세리프/산세리프는 글꼴의 삐침 여부만 가지고 나눈 분류인 만큼 그 안에서도 더 작은 분류로 구분할 수 있어요. (세리프의 경우) 삐침의 크기와 방향 및 형태, 획 굵기 변화 및 대비, 기울기 등에 따라 여러 하위 분류가 있죠. 활판 인쇄 태동기의 스타일을 계승하는 올드 스타일 세리프(Old-Style Serif) 폰트 Garamond, 두껍고 단단한 세리프가 획 끝에 수평으로 붙은 슬랩 세리프(Slab Serif) 폰트 Rockwell. 브랜드 로고의 글꼴이 세리프에서 산세리프로, 혹은 그 반대로 바뀌는 경우도 종종 있는데요. 대표적으로 구글(Google)은 2015년에 세리프에서 산세리프 형태로 로고를 변경하며 더 간결하고 현대적인 느낌을 주고자 했어요. 2) 손글씨와 그림 글자 : 핸드라이팅(Handwriting) & 딩뱃(Dingbat) 인기 핸드라이팅 폰트 중 하나로 꼽히는 Brush Script. 세리프 여부보다는 다른 특징이 두드러지는 손글씨 형태의 글꼴도 있죠. 로마자 글꼴 분류법 중에서도 가장 널리 알려진 복스-국제 타이포그래피 협회(Vox-ATypl) 분류에서는 핸드라이팅(Handwriting)을 뜻하는 서예체(Calligraphics)의 하위 분류로 중세 글꼴에서 유래한 블랙레터(Blackletter), 흘림 필기체를 딴 스크립트(Script) 등을 두고 있습니다.  하지만 기술과 매체의 변화로 독특한 글꼴이 계속해서 늘어나는 만큼, 세리프/산세리프/핸드라이팅이라는 분류로 딱 나누기 어려운 경우도 늘고 있어요.  게임 <언더테일(Undertale)>의 캐릭터 샌즈(Sans)는 카툰풍의 산세리프 폰트, Comic Sans에서 이름을 따왔어요. (대사도 Comic Sans 폰트로 출력되죠!) 한편 그림문자만으로 이루어진 폰트도 있습니다. 조판을 위해 마련된 그림이나 기호를 가리키는 딩뱃은 디지털 시대에도 딩뱃 폰트 파일 형태로 여전히 맥을 이어가고 있는데요. 자판을 누르면 우리가 아는 a~z, 0~9 같은 글자 대신 그림이나 기호가 출력되는 폰트예요. Microsoft Windows에서 제공하는 딩뱃 폰트 Wingdings.  3) 한글 형태를 생각하기 : 네모틀과 탈네모틀 낱자의 높이가 반듯한지, 들쭉날쭉한지 살펴보면 네모틀과 탈네모틀 폰트를 쉽게 구분할 수 있어요. 앞서 본 세리프/산세리프 등은 로마자 글꼴을 대상으로 만들어진 분류법이죠. 한글은 어떨까요? 한글 글꼴 디자인 역사에서 특히 눈여겨볼 만한 흐름이라면 ‘탈네모틀 글꼴’을 연구하고 제안하려는 움직임을 꼽을 수 있습니다. 한글은 한국어의 초성, 중성, 종성에 대응하는 닿자, 홀자, 받침닿자로 이루어져 있는데요. 이중에서 받침이 있는 글자와 없는 글자의 높이에 큰 차이가 없는 글꼴을 ‘네모틀 글꼴’이라고 합니다. 크기가 정해진 네모난 틀(모듈: Module) 안에 글자를 맞춰 놓은 것처럼 만들어서, 받침 유무에 관계없이 높이가 비슷한 글꼴을 말하죠.  탈네모틀 글꼴의 대표작으로 꼽히는 디자이너 이상철의 샘이깊은물체(1984), 안상수의 안상수체(1985). 하지만 한글 기계화 논의가 활발하게 이루어지기 시작하면서 일반적인 네모틀 글꼴이 한글의 특성 및 현대의 가로쓰기 흐름에 적합하지 않다는 주장도 함께 제기되었습니다. 이에 1970~1980년대 한국 디자이너들 사이에서 탈네모틀 글꼴 연구가 이루어졌고, 또 그에 맞는 탈네모꼴 폰트가 등장하기 시작했어요. 4) 글자가 차지하는 너비 : 가변폭(Proportional Font) & 고정폭(Monospaced Font) ‘굴림’과 ‘굴림체’의 차이 역시 가변폭과 고정폭에 있어요. 가변폭 (Variable-width, Proportional Font) 각각 글자마다 너비가 다른 글꼴이에요. 가령 i 같은 글자는 영역의 폭이 좁아지고, m은 넓어지죠. 책이나 잡지, 신문처럼 일반적인 글에서 가독성이 높다고 해요. Windows에서 기본으로 제공하는 바탕, 굴림, 돋움, 궁서 4가지 종류의 한글 폰트 중 -체가 붙지 않은 폰트가 가변폭 글꼴이에요. 고정폭 (Fixed-width, Monospaced Font) 모든 낱자의 너비가 같은 글꼴이에요. 타자기에서 글자가 겹치거나 키가 엉키는 걸 방지하기 위해 등장했어요. 텍스트와 특수문자로 그림을 흉내내는 아스키 아트(ASCII Art)에도 고정폭 폰트를 쓰죠. Windows에서 기본으로 제공하는 바탕, 굴림, 돋움, 궁서 4가지 종류의 한글 폰트 중 -체가 붙은 폰트가 고정폭 글꼴이에요. 가변폭과 고정폭은 로마자 같은 서구 문자에서 유래한 구분이에요. 한글과 한자, 일본어 가나처럼 네모틀 글꼴이 주류가 된 문자라면 일반적으로 고정폭 글꼴이 쓰이지만, 한국어에서는 띄어쓰기 및 부호에 전각 아스키 문자 대신 반각 아스키 문자를 주로 사용하기 때문에 가변폭과 고정폭의 차이가 두드러지는 편이에요. 네이버에서 배포한 코딩 전용 글꼴, D2 Coding. 또 일반적인 글이라면 가변폭 글꼴의 가독성이 더 높지만, 코딩을 할 때에는 고정폭 글꼴을 필요로 해요. 알파벳이나 숫자는 물론 특수기호, 띄어쓰기 등이 섞인 코드를 짜야 하는 업무 특성상 낱자가 명확하게 보여야 하기 때문이죠. 화면에서 글씨 크기가 작아지더라도 잘 보여야 하고, 0과 O, 8과 B처럼 헷갈리는 글자끼리도 잘 구분되어야 합니다. ‘코딩용 글꼴’로 알려진 폰트의 대다수가 화려한 모양새보다는 판독성과 가독성에 집중한 고정폭 폰트인 이유죠. 5) 출력 방식의 차이 : 비트맵(Bitmap) & 외곽선(Outline) 디지털 환경에서 이미지를 출력하는 벡터/비트맵 2가지 방식은 폰트에서도 마찬가지로 적용돼요. 비트맵 (Bitmap) 폰트 점(Dot) 또는 픽셀(Pixel)을 찍는 비트맵 방식으로 그려낸 폰트예요. 한 점이 화면에서 그대로 하나의 픽셀로 표현돼요. 다른 처리 과정이 필요하지 않아 출력 속도도 빠르고, 품질 왜곡이 없죠. 확대하면 에일리어싱(aliasing, 계단 현상)이 두드러지기 때문에 크기마다 각각 디자인을 해야 해요, 외곽선(Outline) 폰트 획의 방향과 굵기를 렌더링하는 벡터(Vector) 방식으로 그려낸 폰트예요. 윤곽 정보를 기반으로 확대 및 축소를 쉽게 할 수 있어 깨끗하게 글자 크기를 조절할 수 있어요. 글자 크기가 작으면 원래 디자인 의도와 달리 왜곡이 발생해요. 출력 과정에서 복잡한 연산 과정을 거치며 부하가 커질 수 있어요. 과거에는 비트맵 폰트가 주를 이뤘는데요. 컴퓨터 사양 및 디스플레이 해상도가 낮고 다양한 글자 크기를 표현할 필요가 없던 시절에 활발하게 쓰였죠. 굴림, 돋움 등 초기 Windows에 기본적으로 탑재된 글꼴은 벡터 폰트에 8pt~15pt 정도의 작은 크기로 된 비트맵 글꼴 정보를 임베딩하는 방식을 택했습니다. 벡터 글씨를 그대로 작게 출력하면 발생하는 왜곡 때문이었어요. 하지만 기술의 발달과 높은 품질의 폰트 출력이 요구되면서 점차 아웃라인 폰트가 대세로 자리잡기 시작했습니다. 안티 에일리어싱(Anti-aliasing) 기술을 통해 경계선에 나타나는 계단 현상을 보완하고 디스플레이 가독성을 높이기도 더욱 쉬워졌고요. 마이크로소프트에서 개발한 안티에일리어싱 기법 클리어타입(ClearType). 서브 픽셀 렌더링을 통해 시스템 폰트가 작은 크기에서도 또렷하게 보일 수 있도록 보정해줘요. 6) 곡선을 구현하는 방식 차이 : 트루타입(TrueType) & 오픈타입(OpenType) 보통 폰트를 내려받을 때에는 .ttf, .otf 두 가지 포맷이 함께 제공되곤 하죠. 둘의 가장 큰 차이는 곡선을 구현하는 베지어 곡선(Bezier Spline)에 있습니다. 쉽게 요약하면 컴퓨터 그래픽에서 곡선을 그릴 때 획 표현을 얼마나 세밀하게 할 수 있는지의 차이예요. 우아한형제들에서 배포하는 폰트 한나체. OTF, TTF 파일을 골라 내려받을 수 있어요. 마이크로소프트와 애플이 개발한 트루타입 폰트(TTF)는 2차 베지어 곡선을 이용하지만, 마이크로소프트와 어도비가 트루타입 글꼴을 발전시키며 다시 설계한 오픈타입 폰트(OTF)는 2차 베지어 곡선은 물론 3차 베지어 곡선까지 이용할 수 있습니다. OTF가 제어점이 더 많고 복잡하기 때문에 더 깔끔하고 섬세하게 곡선을 표현할 수 있지만, TTF에 비해 상대적으로 용량이 크고 출력 속도가 느리죠. 때문에 일반적인 문서라면 TTF가, 고해상도 출력을 요구하는 디자인 관련 작업이라면 OTF가 적합하다고 알려져 있습니다. 7) 서버에 탑재해서 불러오는 글꼴 : 웹 폰트(Web Font) 인프런은 기본 웹 폰트로 프리텐다드(Pretendard)를 채택하고 있어요. 웹 서핑을 하다 보면 내 PC에 설치하지 않은 글꼴이 브라우저에서 정상적으로 출력되는 경우를 종종 볼 수 있죠. 폰트 파일을 서버에 탑재해 클라이언트(사용자의 웹 브라우저)로 보내는 웹 폰트 기술이 적용되어 있기 때문입니다. 웹 폰트 기술을 이용하면 기기마다 다르게 탑재된 폰트를 고려할 필요 없이 원래 의도했던 글꼴 그대로 사용자에게 보여줄 수 있어 편리해요. 단, 트래픽 역시 커지기 때문에 로딩 속도가 느려지는 등 사용자 경험에 영향을 끼칠 수도 있어요. 💡 기술 보완에서 환경을 위한 대안까지: 잉크트랩(Ink Trap) 전화번호부처럼 작은 글씨를 인쇄할 때, 잉크의 번짐을 이용해 획이 맞닿는 부분에 홈을 더 내서 원하던 모양의 글자가 찍혀 나오게 하는 기법을 잉크트랩이라고 해요. 글자에서 잉크가 뭉쳐 가독성이 떨어지는 현상을 막기 위해 등장한 기법이죠. 최근에는 인쇄 품질이 좋아지면서 잉크트랩을 심미적인 효과를 얻기 위해 활용하거나 환경 보호 및 비용 절감 관점에서 ‘에코 폰트’를 구현하는 목적으로 쓰기도 합니다. 목적에 따라 다르게 전해요폰트 속성이 주는 뉘앙스 다양한 굵기를 제공하는 구글 스포카 한 산스 네오(Spoqa Han Sans Neo) 폰트. 굵기(Weight)는 생김새가 같은 글꼴이라도 다르게 보이게끔 하는 대표적인 속성입니다. 출판/출력물 디자인에서 동일한 글꼴(Typeface)을 쓰더라도 제목과 본문, 또는 가장 중요한 내용과 덜 중요한 내용의 굵기에 차이를 두는 모습을 흔히 볼 수 있죠. 웹 문서에서 글꼴 스타일을 지정할 때도 본문(paragraph, <p>)과 제목(heading, <h1> <h2> <h3>...)의 글자 크기와 굵기를 달리하는 게 일반적이고요. 때문에 시스템 폰트를 대체해서 애플리케이션에 다른 폰트를 도입할 때에는, 해당 폰트가 다양한 굵기를 지원하는지 역시 중요하게 고려해야 할 점으로 여겨져요. 인프런 질문/답변, 고민있어요, 블로그 글 작성에 쓰이는 텍스트 에디터도 요소에 따라 다양한 굵기와 효과를 지정할 수 있도록 만들어져 있어요. 굵기뿐만 아니라 기울어진 글씨(이탤릭: Italic)는 인용이나 첨언 또는 강조를 위해 자주 사용되는 속성인데요. 이밖에도 취소선(Strikethrough)은 삭제됐거나 변경되어 유효하지 않은 내용을, 위첨자(Superscript) 및 아래첨자(Subscript)는 뜻이나 지수, 발음, 그밖에 주석 등을 덧붙이는 역할을 하죠. 특히 웹 환경에서라면 밑줄(Underline)은 클릭하면 지정된 다른 페이지로 이동하는 하이퍼링크(Hyperlink)를 암시하는 역할을 합니다.  차츰 새로워지는 행보오늘날의 폰트 이모저모 인프런에서 웹폰트로 사용하고 있는 프리텐다드(Pretendard) 역시 오픈 소스였던 구글의 Noto Sans KR(본고딕) 기반으로 다듬어 만든 시스템 폰트입니다. PC의 보급, 디지털 출판으로의 변화, 웹/모바일 애플리케이션의 부상 등 현대 폰트의 발전은 IT 분야와 밀접하게 얽혀 있어요. 때문에 많은 폰트가 IT 업계의 동향에 발맞춰 나가는 모습을 쉽게 발견할 수 있는데요. 상업적 목적으로 이용할 수 있는 폰트를 모아놓은 서비스 눈누. 2010년대 이후 특히 눈에 띄는 움직임은 오픈 폰트 라이선스로의 흐름입니다. 기업이나 기관에서 산돌, 윤디자인그룹 등 폰트 제작사에 의뢰해 만든 전용 폰트를 일반 사용자들에게 개인 또는 상업적 이용 전제로 배포하는 경우가 늘고 있죠. 이런 폰트 배포는 오픈소스 소프트웨어 모델을 뿌리로 IT 생태계에 기여하는 한편 단체의 브랜드 정체성을 각인시키는 홍보 효과를 함께 누릴 수 있어요. 클로바 AI 기술로 만들어진 네이버 ‘한글한글 아름답게’ 나눔손글씨 폰트. 한편 인공지능 기술이 발전하면서 폰트를 디자인하는 방식 역시 독특한 변화를 맞고 있습니다. 네이버는 한글날을 기념하는 손글씨 공모전을 통해 네이버 클로바 AI 기술을 바탕으로 만든 나눔손글씨 109종을 제작해서 배포하고 있어요. (지난 2023년 7월 관련 서비스를 종료한) 온글잎처럼 상용화된 손글씨 기반 폰트 제작 서비스도 찾아볼 수 있었고요. 💡 폰트 저작권, 어떻게 지켜야 할까? 대법원 판례에 따르면 한국에서 서체는 저작물로서 인정받지 못한다고 합니다. 정확히는 글꼴 자체가 아닌, ‘폰트 파일’만 저작권법에 의해 보호받기 때문에 불법 폰트 파일을 사용한 증거가 있어야 저작권 위반에 해당하죠. 저작권법 위반인 경우 유료로 구입해야 하는 폰트의 파일을 복제하거나 다른 사람에게 공유하는 경우 저작권을 침해한 복제 폰트 파일을 취득한 뒤 해당 사실을 알면서 업무상 이용하는 경우  애플리케이션에 이용 권한 없이 폰트 파일을 탑재하는 경우 (웹 폰트, 앱 시스템 폰트) 저작권법 위반이 아닌 경우 글꼴을 문서나 기록 외 용도로 예술적으로 승화시킨 경우 해당 예술 작품에 한해 저작권을 인정함 즉 유료 폰트를 불법으로 공유하거나, 불법으로 취득한 폰트를 사용해서는 안 된다고 볼 수 있어요. 기업이나 기관 등에서 무료로 배포한 폰트라고 하더라도 이용 범위 및 조건을 확인하고 쓰는 게 중요하겠죠. 지금까지 살펴본 폰트의 세계, 어떠셨나요? 기술과 미학의 발전과 더불어 우리 곁에 찾아올 앞으로의 폰트는 어떤 모습일까요? 계속해서 ‘읽는 즐거움’을 더해줄 폰트의 행보에 함께 기대를 걸어보아요! 😄 [인프메이션]을 계속 받아보고 싶다면? 매달 첫번째 & 세번째 화요일마다 찾아오는 인프런 뉴스레터, [헬로 인프런]으로 가장 빨리 인프메이션을 받아보세요!지난 [인프메이션] 이 궁금하다면? (클릭) 헬로 인프런 구독하러 가기 💌[인프런 소식 및 홍보]를 ON으로 바꿔주세요 😊

뷰 개발자라면 이제는 미룰 수 없다! 소문 무성하던(?) Vue 3 파헤치기 🕵️ 사용자 인터페이스 구축을 위한 자바스크립트 프레임워크, Vue.js. 지난 몇 년 동안 리액트(React)와 함께 수많은 프론트엔드 개발자가 사용하는 기술이죠. 2020년대 들어 Vue.js의 최신 3 버전에 대해 프론트엔드 진영의 이목이 쏠리고 있는데요. Vue 3에서는 무엇이 바뀌었고, 또 어떤 점이 좋아졌을까요? Vue.js이 등장하게 된 배경부터 Vue.js의 특징, 그리고 Vue 3으로의 발전에 대한 이야기! 인프런에서 간단하게 정리해보았습니다. 함께 살펴보실까요? 😆 가볍고 유연한 Vue.js의 시작 2000년대 중반 웹 인터페이스 구현의 대세는 단연 jQuery(제이쿼리)였습니다. 하지만 시간이 흘러 웹 생태계가 발전하고, 전보다 복잡한 웹 페이지를 개발해야 하는 과정에서 jQuery에 대한 기술적인 아쉬움이 드러나기 시작했어요.  그렇게 2010년대 초반 잇달아 등장한 앵귤러(AngularJS), 리액트(React) 그리고 Vue.js는 현대 프론트엔드 개발에 새로운 혁신을 가져온 기술로 꼽혀요. 철지난 표현이 되긴 했지만, 당시엔 모던 프론트엔드 프레임워크/라이브러리 3대장이라고 불릴 정도였으니까요. 앵귤러가 2010년, 리액트가 2013년에 출시된 데 비하면 Vue.js의 등장은 비교적 늦은 2014년에 이루어졌습니다. Vue.js는 구글에서 AngularJS로 프론트엔드 개발을 하던 개발자 에반 유(Evan You)가 AngularJS의 단점을 개선하고자 만들었어요. AngularJS는 방대한 기능을 지원하지만, 그만큼 프로젝트 구성이 복잡해지고 사용하기 어렵다는 문제가 있었죠. 때문에 Vue.js는 가벼우면서도 쓰기 쉽고 유연한 개발 도구를 지향하고 있어요. 쉬운 학습 곡선 AngularJS, React에 비해 초심자가 빠르게 이해하고 사용할 수 있게 설계되어 있어요. 공식 문서도 자세하게 되어 있기 때문에 참고하며 학습하기 좋아요. 높은 유연성 다른 프레임워크/라이브러리와 쉽게 통합할 수 있는 플러그인 시스템을 제공해요. (뷰라는 이름처럼) 뷰 레이어 관리에 집중하되, 상태 관리나 라우팅 같은 다른 기능은 프로젝트 요구사항에 맞게 선택해서 적용할 수 있어요. 강력한 반응성 시스템 상태 변경을 감지해 DOM을 자동으로 업데이트하고 부가적인 동작을 수행하는 반응성(Reactivity)이 뛰어나요. UI 업데이트 관리가 쉽고, 사용자 경험을 향상시키는 데 도움이 되죠 컴포넌트 기반 아키텍처 애플리케이션을 작고 독립적인 컴포넌트(Component) 단위로 구성하기 때문에 코드 재사용성과 유지보수성이 높고, 컴포넌트끼리의 통신 및 상태 관리가 편리해요. 선언적 렌더링 프로그래밍 언어 단계에서 코드를 하나하나 작성할 필요 없이, 간단한 템플릿 구문을 사용해 선언하기만 하면 DOM에 데이터를 렌더링할 수 있는 시스템을 가지고 있어요. 편리한 Vue CLI 프로젝트 생성 및 개발 서버 실행이나 빌드, 테스트, 배포 자동화, 플러그인 추가 등에 도움이 되는 Vue CLI를 통해 프로젝트를 보다 쉽게 설정하고 관리할 수 있어요. 최근에는 더 강력한 Vite가 등장해 눈길을 끌고 있죠. Vue.js 개발자가 에반 유 직접 만난 썰! “2018년 3월에 에반 유 수업 들으러 휴가를 일주일을 썼어요. 하루 종일 에반 유랑 같이 Vue.js 프레임워크를 자바스크립트로 만드는 수업인데, 거기서 저는 Vue.js 코어 같은 것들을 만들어봤고요. 지금 실제로 사용하고 있어요.” “에반 유는 겸손하고 배려를 많이 하는 사람이었어요. 백그라운드는 원래 디자이너였다고 해요. 예술 전공을 하고, 석사로 예술 + IT 쪽을 하다 구글에 들어간 거예요. 거기서 앵귤러로 프로그래밍을 하다 앵귤러가 너무 무겁고, 자기처럼 비전공자를 위한 프레임워크는 아니라고 생각해서 Vue.js를 따로 만든 거죠. 그리고 지금은 많은 사람들에게 Vue.js가 쓰이고 있고요. “그게 중요한 것 같아요. 자기가 잘한다고 해서 남을 배려하지 않고 자기의 길만 가는 것보다, 결국에는 같이 간다는 마음에서 남들을 위한 프레임워크를 만든다는 게 저는 의미있다고 생각하거든요. 그래서 Vue.js가 괜찮은 것 같아요.” 인프런이 만난 사람, 장기효(캡틴판교) 님 인터뷰 中 최신 Vue 3, 뭐가 다를까요? 2022년 2월, Vue 프로젝트의 기본(Default) 템플릿이 Vue 3 버전으로 변경되었습니다. 처음으로 Vue 3 버전에 대해 언급한 지 거의 2년 반만에 이루어진 변화였어요.  Vue 3 간단 타임라인 2019년 10월, Vue 3 Pre-Alpha가 외부에 첫 공개되었어요. 2020년 1월, 공식 Alpha가 출시되었어요. 같은 해 4월에는 공식 Beta 버전이 시작되었습니다. 2020년 9월, Vue.js 3.0 “One Piece”가 공식 출시되었어요. (여러분이 생각하는 그 원피스가 맞습니다!) 2022년 2월, Vue3의 안정화 버전 3.2.28이 출시되고 Vue 프로젝트의 기본 템플릿이 Vue 3으로 변경되었어요. 2023년 12월 31일을 마지막으로 Vue 2 지원이 종료될 예정이에요. 어떻게 보면 2022년 2월이 되어서야 Vue 3이 Vue.js 생태계의 표준으로 자리잡을 때가 되었다는 공식적인 선언을 한 셈인데요. 길다면 긴 시간이다보니 Vue 3이 예전 버전과 뭐가 다른지 배워야 할지, 언제 Vue 3으로 넘어가야 할지도 프론트엔드 개발자 사이에서 그동안 꽤 자주 언급되는 화제였죠.  그렇다면 Vue 3는 기존 버전과 어떻게 다를까요? 최신 3 버전은 Vue.js가 등장했던 태초의 이유를 ‘더’ 잘 살리는 방향으로 진화했다고 볼 수 있는데요. 더 가볍고, 더 유연하고, 더 빠른 프레임워크를 추구하고 있기 때문입니다. Vue 3에 대응하는 Vue.js 공식 문서. 아직 기존 Vue 2에 대응하는 문서도 공개하고 있어요. ⓒVue.js 가상 DOM 최적화 jQuery를 대체한 모던 프론트엔드 기술이 등장한 가장 큰 이유 중 하나는 DOM 조작이었습니다. 많은 DOM을 조작하면 성능에 큰 부하를 줄 수 있기 때문이죠. 기존 Vue 2에서의 가상 DOM 설계는 HTML 기반 템플릿을 제공한 다음, 이를 가상 DOM 트리로 반환하는 과정을 거쳐 실제 DOM에서 업데이트되어야 하는 영역을 탐색하는 방식이었습니다. 이런 방식은 매번 전체 트리를 확인해야 하기 때문에 불필요한 탐색이 늘어 비효율적이고 동작도 무거워지게 될 수 있는데요. Vue 3에서는 가상 DOM 최적화를 통해 템플릿 구문에서 정적 요소와 동적 요소를 구분하고, 트리 순환 때 동적 요소만 순환할 수 있게 해서 렌더링 트리의 탐색을 최적화했어요.  Vue.js 공식 문서에서는 렌더 파이프라인을 다음 도식으로 설명하고 있어요. ⓒVue.js 또 템플릿 내 정적 요소나 서브 트리, 데이터 객체 등 렌더링 관련 객체를 컴파일러가 미리 감지해 렌더러 함수 밖으로 호이스팅(Hoisting)시켜 렌더러마다 객체를 다시 생성하지 않게 했죠. 그리고 컴파일러가 템플릿 내 동적 바인딩 요소에 대해 처리할 수 있도록 플래그를 미리 생성해두어서 렌더링 속도도 더욱 빨라졌어요. 강력한 타입스크립트 연계 타입스크립트(TypeScript)와의 통합도 눈여겨봐야 합니다. 최근 들어 업계에서 타입스크립트는 자바스크립트(JavaScript)를 대체하고 보강하는 표준으로 떠오르고 있는데요.  Vue 3은 기존 버전에서 JS로 작성되어 있던 라이브러리 내부 로직을 전부 TS 기반으로 다시 작성했어요. 타입스크립트와의 통합이 더 원활하게 설계되면서 타입스크립트를 사용해 컴포넌트와 애플리케이션 코드를 보다 안전하게 작성하고, 타입스크립트 개발을 지원하는 IDE(통합 개발 환경)와의 궁합도 더욱 좋아졌죠. 개선된 API와 새로 지원하는 문법 Vue 2에서도 원래 지원이 되던 문법들이 공식 라이브러리 레벨로 내려갔어요. Vue 3에서는 기존 버전에서 리액티비티(Reactivity)를 쓸 때 주의해야 하는 점들을 해결하는 방향으로 개선된 API를 제공하는데요. Vue 컴포넌트의 데이터 변경을 더 효율적으로 감지하기 때문에 더 빠르고, 성능도 향상됐습니다. 뿐만 아니라 컴포지션 API(Composition API), 텔레포트(Teleport) 등 별도 문법을 추가로 지원하면서 개발하면서 쓸 수 있는 선택지가 더욱 늘어났어요. 특히 컴포지션 API는 Vue 3의 가장 큰 특징이라 할 수 있는 기능입니다. 그전까지 Vue.js에서는 옵션 기반의 API를 사용했는데요. 컴포지션 API를 사용하면 컴포넌트 로직을 함수로 구성하고, 필요한 로직을 구성 함수 간에 재사용할 수 있게 돼요. 코드의 가독성을 높이고 유지 보수도 더욱 쉬워지죠. 옵션 API로 이루어진 컴포넌트를 컴포지션 API로 리팩터링하면 코드가 더 효과적으로 그룹화됩니다. ⓒVue.js 텔레포트는 컴포넌트를 DOM에서 다른 위치로 이동할 수 있게 해서 컴포넌트 코드 재사용성을 높여주는 역할을 해요. 모달이나 드롭다운 메뉴, 팝업 등 UI 컴포넌트를 구현할 때 특히 유용하게 쓸 수 있죠. 이전에는 한 UI 컴포넌트를 렌더링하려는 위치가 템플릿 구문이 속한 컴포넌트에 있지 않으면 컴포넌트 구조를 변경하거나 분리해야 해서 번거로웠거든요. 리액트의 포털(Portals)과 비슷한 기능이라고 볼 수 있어요. 줄어든 번들 크기 Vue 3은 기존 버전에 비해 더 작은 번들 크기를 가져요. 나무를 흔들어서 잔가지를 터는 것처럼, 모듈을 번들링할 때 사용하지 않는 코드(‘죽은 코드’)를 제거하고 컴파일러가 실제로 쓰는 코드만 출력하는 트리 셰이킹(Tree Shaking)이 대폭 강화됐기 때문이죠. 여기에 더 효율적인 빌드 프로세스를 통해 애플리케이션의 성능을 최적화할 수 있도록 맞춰져 있어요. 더 좋아진 개발 편의성 뷰 개발자 도구나 VSCode 플러그인 등 주요 개발 도구 변경을 통한 지원 강화도 눈에 띕니다. 그중에서도 Vue 3과 함께 개발된 Vite는 기존의 Vue CLI를 대체해가고 있을 뿐만 아니라 리액트, 스벨트(Svelte) 등 다른 프론트엔드 프레임워크/라이브러리를 사용하는 진영에서도 주목하는 도구가 되었죠. 또 최신 Vue 3 공식 문서는 한국어를 지원하기 때문에 국내 개발자들이 Vue를 배우고 참고하기 더욱 편리해졌습니다. 이런 변화들은 Vue 3를 더 성능 좋고, 유지보수가 편리하고, 사용자 경험을 향상시킬 수 있는 도구로 만들어가고 있어요. 기존 Vue.js 프로젝트를 업그레이드하거나 새로운 프로젝트를 시작하는 데 Vue.js 사용을 고려하고 있는 분들이라면 이런 기능과 변경점을 잘 알고 있는 게 도움이 되겠죠. 프론트엔드 개발 진영은 새로운 기술이 등장하고 업데이트가 이루어지는 속도가 유난히 빠르다고들 합니다. 대세였던 기술이 다른 기술로 교체되는 경우도 빈번하고요. Vue 3의 등장은 개발 생태계에 어떤 변화를 불러올까요? 미래를 알 수는 없겠지만, 적어도 더 효과적인 방식과 도구를 고민하고 있는 개발자들이라면 이렇게 발전해나가는 흐름은 무척 반가운 소식이 아닐까 하네요! 최신 Vue 3에 대한 더 많은 이야기인프런에서 자세히 만나보세요! 이 글과 관련 있는 추천 Vue.js 강의 👇  이 글을 읽고 있는 분이라면, 쿠폰함에 코드 대세는vue3을 입력해보세요. add_shortcode('course','332010,332279,329012','list')