블로그의 역할이 변하면서

추석 연휴에 시간이 남아 블로그 리브랜딩 작업을 했어요. 취업을 준비하면서 기존 작업물을 한 번 정리할 필요도 있었고요.

기존 블로그는 구글 검색으로 들어온 방문자를 개인 프로필이나 포트폴리오로 연결하는 흐름을 목표로 설계했어요. 즉, 블로그가 all-in-one 홈페이지 역할을 해야 했어요. 그래서 Chirpy라는 테마를 써서 프로필과 포트폴리오를 항상 좌측 사이드바에 띄워뒀어요.

과거 블로그 2023.10 Chirpy 테마

하지만 이제 블로그는 글을 전달하는 역할만 맡아요. 개인 프로필과 포트폴리오는 링크드인을 메인으로 활용하기로 했어요. 블로그에는 github README에 적지 못하는 비공식적인 이야기나, CV에 넣을 자리가 없어 빠진 디테일을 적어둬요. URL을 누른 독자에게 그 내용을 잘 전달하기만 하면 돼요. 그래서 시각적으로 복잡한 사이드바도, chirpy의 화려한 장식도 더는 필요 없어졌어요. 이런 이유로 디자인을 전반적으로 손보기로 했어요.

Jekyll 테마는 minima를 쓰기로 했어요. 정확히는 마음에 드는 테마를 찾지 못해서, Opus5.5와 함께 minima를 커스텀하기로 했어요. Minima에는 블로그 본문 외에 다른 요소가 거의 구현되어 있지 않아요. 그래서 목적에도 맞고, 커스텀할 때 side-effect도 적을 거라 생각했어요.

AI가 초래한 디자인 트렌드

본격적으로 작업하기 전에 최근 디자인 트렌드를 살펴봤어요. 디자인 기법보다는 사용자가 어떤 행동 경향을 갖게 됐고, 그 배경이 무엇인지에 집중했어요. 그러자 가장 큰 키워드로 “AI“가 떠올랐어요. 구체적인 이야기에 앞서, AI 이전 시대의 디자인을 잠깐 살펴볼게요.

ios7 & shadcn

UI 디자인의 패러다임이 크게 바뀐 기점 중 하나가 iOS 7이라고 생각해요. 당시 스마트폰이 널리 보급됐지만, 화면은 여전히 작았어요. 이 좁은 공간에 정보를 효율적으로 배치하고 전달하기 위해 디테일을 덜어낸 flat design이 자리 잡았어요. 이후 디자인은 flat design을 기반으로 점점 발전해요. 최근까지도 shadcn 같은 디자인 시스템이 널리 쓰이고 있어요 (UX Magic).

iOS 26 & 브랜드 로고 & toss 블로그

이후 모니터와 스크린의 해상도가 높아지면서, 기존 flat design 위에 입체감과 생동감을 더하기 시작했어요. 애플은 flat한 아이콘에 그림자를 넣어 입체감을 더했고, tech 기업들은 로고에 그라데이션을 쓰기 시작했어요. 국내 기업인 토스와 당근도 3D 캐릭터나 아이콘을 사용하고 있어요 (토스 테크). 이런 방식은 flat design의 가시성과 접근성을 살리면서 사실적인 느낌을 더해줘요. 더 나아가 움직이는 애니메이션 효과로 생동감을 강조하기도 해요.

여기까지는 좋았어요. 하지만 이 시스템을 AI로 어설프게 활용한 결과물이 늘어나기 시작해요. 그 결과 저품질 콘텐츠가 많아지고, 사람들은 인지 부담을 느끼게 돼요. 갤럽을 비롯한 여러 통계에서 AI 생성물에 대한 반감을 확인할 수 있어요.

Gemini 생성 예시

AI로 생성한 디자인을 보면 flat design을 기반으로 그라데이션과 그림자가 더해져 있어요. 하지만 겉모습만 따라 했을 뿐, 텍스트와 버튼의 계층이 잡혀 있지 않아요. 그라데이션과 그림자도 불필요하게 들어가 기대하던 UX를 경험하기 어려워요. 이런 일이 반복되면서 그라데이션과 그림자가 들어간 flat design만 봐도 싫증이 나게 됐어요. 그래서 오히려 ‘사람다운 불완전함‘이 키워드로 제시되고 있어요 (bigeye, outcrowd). AI 기업의 대표 격인 openai도 이 흐름에 동참해 리브랜딩을 진행했어요.

OpenAI 리브랜딩 사례

OpenAI brand guidelines 영상 중

OpenAI 브랜드 가이드는 로고를 두고 “원을 사용하여 인간 중심적 사고의 유동성과 따뜻함을 담아…“라고 설명해요. Miles Jay 감독과 함께한 영상이나 한국 광고를 봐도 사람 냄새 나는 영상이 중심이에요. 누구보다 AI의 선봉에 서 있는 기업이지만, 역설적으로 그렇기 때문에 AI가 아닌 사람에 초점을 맞춘 브랜딩이 필요하기도 하다고 생각해요. 참고로 Anthropic도 초기부터 종이 질감, serif체, 손으로 그린 듯한 일러스트로 일관된 브랜딩을 이어오고 있어요.

저도 이 흐름에 맞춰, 매끈하게 정돈된 결과물보다 사람의 손길이 느껴지는 불완전함을 블로그 곳곳에 담아보기로 했어요. 이런 맥락을 바탕으로 본격적인 블로그 작업을 살펴볼게요.

개발 철학을 로고에 담아내며

Playground Logo

블로그로 보여주고 싶은 개발 철학은 크게 두 가지예요.

첫 번째는 궁금한 내용을 마음껏 시도하고 실패하는 공간이 필요하다는 거예요. 논문처럼 완성된 글이 아니라, 호기심이 생기는 대로 빠르게 도전하는 곳이요.

두 번째는 유연하고 단순한 사고예요. 다양한 시각으로 접근하되, 문제의 본질적인 핵심만 남기고 나머지는 걷어내 가장 단순한 형태로 만들 수 있어야 한다고 생각해요.

이 특징을 잘 담을 단어를 찾던 중, 카이스트 합격 메일에서 ‘놀이터(Playground)’라는 단어를 발견했어요.

KAIST는 여러분의 놀이터입니다. 마음껏 상상하고, 꿈꾸고, 도전하고, 즐기는 곳입니다. 각자의 특별한 빛깔과 고유의 가치를 찾아 큰 꿈을 꾸고 마음껏 도전할 수 있도록 지원할 것입니다.

여기서 영감을 받아 블로그 이름을 Playground로 정하고, 첫 글자인 ‘P’를 형상화해 로고를 만들었어요. 유연함을 살리기 위해 그림자를 활용해 말랑한 느낌의 오브젝트를 만들었어요. 이 위에 넘어져도 아프지 않을 것 같은 느낌이 들 정도로요.

더 나아가 마우스로 인터랙션할 수 있는 화면을 만들어 이 느낌을 더 직관적으로 표현했어요. 또한 단순함을 강조하기 위해 단색을 썼어요. 덕분에 다른 플랫폼에 활용할 때도 flat logo 내부의 색상만 바꿔 쓸 수 있어요.

일관된 톤으로 말하도록

폰트는 sans-serif를 유지했어요. 본문은 가독성을 지키고, 프로필 페이지에서만 필기체로 불완전함을 살리기로 했어요. 본문에도 serif나 필기체를 고려했지만, 24인치 FHD 모니터만 해도 serif는 글자가 자글자글하게 깨져 보여서 가독성이 떨어질거라 판단했어요.

home

대신 프로필 페이지에는 필기체를 섞어 자연스러운 느낌을 살렸어요. 프로필은 텍스트보다 사람의 이미지와 분위기가 더 드러나야 하는 공간이에요. 블로그와 완전히 같은 디자인 시스템을 따를 필요도 없어서 폰트를 섞어 쓰기로 했어요. 페이지를 처음 열면 글자가 하나씩 나타나는, 실제 손으로 쓰는 듯한 애니메이션을 추가했어요. 이 애니메이션으로 시선을 필기체 텍스트 쪽으로 집중시켜요.

프로필 이미지도 채도를 낮추고 그레인 효과를 넣어 빛바랜 느낌을 살렸어요. 테두리에는 살짝 불규칙한 선을 넣어 분위기를 맞췄어요. 필기체, 빛바랜 사진, 삐뚤한 테두리는 모두 앞서 말한 ‘불완전함’을 드러내기 위한 장치예요.

블로그 본문의 그림도 손으로 그린 듯한 스타일로 바꿨어요. 현학적이고 지루한 발표보다는 브레인스토밍하는 듯한 느낌을 살렸어요.

보이스 톤은 과거 “해요” 때 만든 해요체 시스템을 사용했어요. 간단히 설명하면, 토스나 당근이 사용하는 글쓰기 톤과 가이드를 조합해 LLM으로 글을 다듬는 시스템이에요. 여기서 해요체는 친근하고 따뜻한 느낌을 주는 역할을 해요. 따라서 모든 게시물 초안은 이 시스템으로 다듬고, 마지막에 제가 직접 읽으며 어색한 부분만 고쳐서 올려요.

마무리하며

결과적으로 글에만 집중할 수 있는 가장 단순한 형태의 블로그를 만들었어요. 완벽하진 않지만 그렇기 때문에 더 매력있는 공간이 되길 바라면서요.


Linkedin 등 SNS 공유를 염두에 두고 미리보기와 배너도 함께 만들었어요. Linkedin의 프로필 배너와 og image에는 빈티지한 느낌을 더 강하게 넣었어요. 블로그로 연결되는 og image는 일관된 경험을 위해 sans-serif와 로고를 강조한 심플한 스타일로 만들었어요.


Lighthouse로 검사해 보니 전반적으로 높은 점수를 받았어요. 별도의 폰트를 불러오지 않고, 이미지는 자동으로 webp 형식으로 최적화되기 때문이에요. 여기에 lazy loading까지 적용되어 있어서 첫 랜딩 페이지를 빠르게 그릴 수 있어요.