Mastodon 5.0 자세히 보기

Mastodon 5.0은 게시물 작성기를 팝아웃 방식으로 바꾸고 탐색 메뉴와 피드 UI를 개편합니다. Mastodon 팀은 신규 사용자의 진입 장벽을 낮추면서 기존 기능을 유지하고, 커뮤니티 테스트 의견을 반영해 작성기 위치와 공개 범위 설정 등을 조정했습니다.

주제: 개발 도구 웹 커뮤니티

에디터 노트

이번 개편에서 근거가 구체적인 부분은 작성기와 공개 범위 설정을 사용자 피드백에 맞춰 다시 배치한 과정입니다. 특히 수신자를 동적으로 보여주려다 혼란을 줘 고정 라벨로 바꾼 사례는 명확성을 우선한다는 원칙이 실제 UI 결정으로 이어진 모습입니다. 반면 둥근 모서리가 친근함과 브라우저 디자인에 맞는다는 설명은 팀의 디자인 의도이며, 사용자 반응에서 합의가 확인되지는 않습니다. 댓글에는 과도하게 둥글다는 불만과 화면 배치에 대한 지적이 나왔고, 데스크톱 앱으로 오해한 비판은 웹 UI라는 설명 뒤 철회됐습니다. 따라서 창 테두리 관련 우려는 디자인 자체에 대한 반론으로 남지 않지만, 여백과 둥근 형태에 대한 취향 차이는 그대로 남습니다.

AI 요약

Mastodon 팀은 5.0 출시를 앞두고 대규모 UI 개편의 배경과 설계 결정을 설명합니다. 제한된 개발 자원과 오래된 기술·UX 부채가 작업 범위를 제약했고, 숙련된 기존 사용자와 처음 방문하는 사용자의 요구도 서로 달랐습니다. 팀은 명확성을 편의보다 우선하고, 이후 기능이 들어갈 공간을 남기며, 접근성과 사용성을 작은 단위로 개선한다는 원칙을 세웠습니다.

주요 UI 변경

기존 화면 안에 붙어 있던 게시물 작성기를 팝아웃 방식으로 바꿉니다. 탐색 메뉴는 간결하게 정리하고 피드 게시물 화면도 다시 구성합니다. 새 색상 테마를 추가하고, 게시물 메뉴에서 다른 사용자의 부스트를 숨기거나 해시태그를 바로 팔로우할 수 있게 합니다. 홈 피드에서 자신의 게시물과 부스트를 숨기는 설정도 추가합니다.

8월 발표 이후 조정한 내용

초기 시안에서 오른쪽 아래에 있던 작성기는 탐색 메뉴와 멀다는 의견을 받아 화면 하단 중앙으로 옮겼습니다. 작성 중인 초안을 잃지 않고 작성기를 최소화할 수 있습니다. 탐색 메뉴의 새 게시물 버튼은 더 눈에 띄게 바꾸되 마우스 이동 거리를 줄이도록 아래쪽에 배치합니다. 모바일에서는 버튼을 누르면 하위 메뉴 대신 작성기가 바로 열립니다.

공개 범위 선택 메뉴는 제한 공개 게시물의 수신자를 동적으로 표시하려던 방식을 접고, 대상 범위를 설명하는 몇 가지 고정 라벨로 단순화했습니다. 민감한 미디어 흐림 처리와 콘텐츠 경고는 별도 설정으로 나눴습니다. 게시 후 바꿀 수 있는 인용 설정은 공개 범위처럼 수정할 수 없는 항목과 분리해 배치합니다.

사용자 조사와 다음 계획

팀은 자원봉사자와 일주일 동안 설문과 워크숍을 진행했습니다. 초기 발표 뒤 받은 의견을 살피고 내부와 사용자 대상 프로토타입 테스트를 거쳐 디자인을 수정했습니다. 기존 사용자가 새 UI에 적응해야 하는 부담은 웹에서 흔히 쓰는 패턴을 따르고 변경 사항을 블로그와 공지로 알리는 방식으로 줄이겠다고 설명합니다. 둥근 모서리는 친근한 브랜드 인상과 현대 브라우저의 시각 스타일에 맞추려는 선택이라고 밝혔습니다.

검색, 설정, 메시지, 알림 화면은 아직 큰 개편이 필요한 영역입니다. 팀은 5.1에서 이 화면을 모두 다시 설계하기는 어렵다고 밝혔으며 검색과 발견 기능을 우선 과제로 꼽았습니다. 당시 계획으로는 10월 20일 mastodon.social에 새 디자인을 적용하고, 서버 관리자가 시험할 수 있도록 5.0 베타를 배포한 뒤 몇 주 안에 정식 출시할 예정이었습니다.

Lobsters 반응

@nemin — 둥근 디자인이 왜 필요한지 모르겠습니다. 시대의 흐름을 따라가야 한다는 건 알지만 직각 테두리를 외면하는 유행이 아니었으면 좋겠습니다. 그래도 나머지는 괜찮아 보입니다. 화면 오른쪽은 텅 비어 보이고 가운데 열은 배경색이 달라 페이지 나머지와 따로 노는 느낌입니다. 큰 변화를 시도한 점은 좋습니다. 전체적으로 더 편안하고 친근해 보입니다.
- @pgn — 파스텔 색은 확실히 부드럽지만 둥근 모서리는 별로입니다. 너무 과합니다. 제 생각에 둥근 모서리는 더 나쁜 UX를 감추는 데 쓰이기도 합니다. 네모난 단색 화면은 보기 나쁘지만 모서리를 둥글게 하면 '현대적인 디자인'이 되는 식이죠.
- @sph — 누군가 모서리가 뾰족해서 Mastodon을 써보려다 마음을 바꿨다고 믿고 싶군요. 너무 불친절하니까요! FAANG에서 경력을 쌓은 디자이너들이 쓰는 전형적인 기업식 표현입니다.
@leela — 둥근 요소와 위쪽이 흐려지는 효과를 줄이려고 사용자 CSS를 직접 만들 생각입니다.
- @arialdo — 만드시면 공유해 주세요. 정말 고맙겠습니다.
@wareya — 창 테두리 같은 요소를 없애면 프로그램을 이미 열고 위치까지 맞춘 상태에서만 쓰라는 듯한 느낌이 듭니다. 창을 옮기거나 최소화하거나 다른 프로그램으로 전환하는 상황은 잊은 것 같습니다. 사람들은 그 앱만 쓰는 게 아니라 컴퓨터를 사용합니다. 게임 런처처럼 그럴 수 있는 프로그램도 있지만 대부분의 프로그램에서는 불편합니다. 적어도 Chrome 같은 브라우저는 운영체제 창 테두리를 흉내 냅니다. Discord는 그렇게 만든 창 테두리가 인터페이스에서 가장 버그가 많은 부분 중 하나입니다. 다만 Discord는 빈 공간을 적게 쓰고 그 방식으로 채팅 공간을 확보하니 감수합니다. Mastodon 화면에는 운영체제 창 테두리도, 이를 흉내 낸 요소도 보이지 않습니다. 제가 틀렸다고 말해 주세요. 모서리 반경 40픽셀도 마음에 들지 않습니다. 지금은 현대적이라고 해도 오래갈 것 같지 않습니다.
- @MikeStone — 제가 잘못 이해했다면 미리 사과하겠습니다만, 이건 애플리케이션이 아니라 웹 UI입니다. 창 테두리는 브라우저에 있습니다.
- @wareya — 두 번째 이미지에 '데스크톱 5.0 웹 인터페이스'라고 적혀 있어서 데스크톱 웹 인터페이스를 앱이라고 표현한 줄 알았습니다. 데스크톱에서 웹사이트에 접속해 보는 화면이라는 뜻인가요?
- @MikeStone — 네, 모바일 웹 UI와 구분하는 데스크톱 웹 UI입니다. 제가 아는 한 공식 데스크톱 앱은 없습니다. 모바일 앱은 있지만요. 확실한 정보라고 장담하진 않겠습니다.
- @wareya — 알려줘서 고맙습니다. 제 비판 대부분은 철회하겠습니다. 스크린샷에서 다른 점도 몇 가지 불만이 있지만 생산적인 이야기는 아닐 것 같습니다.

원문: Mastodon / 번역·요약: Trawling

원문 보기 ↗토론 보기 ↗