Share
Sign In
Designer, Slashpage Inc
커뮤니티형 페이지(데이터베이스)에 커스터마이징 기능 확장
퍼블리시 중심 사용 사례에 따른 기능 확장 처음 커뮤니티형 페이지는 노션이나 에어테이블 같은 데이터베이스 기반 툴을 참고해 추가했다. 이들 서비스는 주로 팀 작업이나 개인 업무 관리처럼 내부 협업에 초점을 맞추고 있어, 실용적인 정보 관리에 집중된 구조가 많다. 슬래시페이지도 초반에는 이런 흐름을 따랐기 때문에 커스터마이징 요소는 크게 고려하지 않았습니다. 하지만 슬래시페이지는 기본적으로 공개용 페이지 제작을 중심에 두고 있고, 실제로도 유저들은 단순한 작업 공간을 넘어서 ‘보여주기 위한 페이지’를 만드는 데 더 관심을 보였다. 페이지의 실용성뿐 아니라 색상, 배치, 너비 등을 조정해 자신만의 브랜딩을 표현하려는 시도가 많았고, 이런 흐름을 보며 커뮤니티형 페이지에도 커스터마이징 기능을 추가했습니다. 사실 내가 블로그 쓸때 필요해져서 추가했습니다~ 게임블로그,디자인 블로그등 테스트 겸 이래저래 사이트를 운영하고 있는데, 이미지가 강조된 형태,내용이 강조된 형태 등 블로그의 성격에 따라 다양한 레이아웃을 사용하고 싶다는 생각을 했고, 고스트(ghost)나 웹 빌더류를 활용해 직접 만드는 블로그는 훨씬더 디자인 자유도가 높은데 우리서비스는 레이아웃의 선택지가 없다는게 금새 아쉬워져서 고스트로 블로그를 옮겨버리고 싶어지기 전에 서둘러 레이아웃 커스텀 기능을 추가했습니다. 다른 블로그 업데이트 1. 페이지 너비 조절 기존에는 ‘노트’에서만 가능했던 페이지 최대 너비 커스텀 기능을 커뮤니티형 페이지에도 가능하게 추가 2. 레이아웃 커스터마이징을 위한 설정메뉴 블로그,그리드,갤러리 타입의 페이지 설정에 '레이아웃을 변경'메뉴를 추가하고, 각 뷰 타입에 맞는 레이아웃 옵션을 프리셋으로 제공함. 더 다양한 부분을 커스텀 할 수 있게 개선할까 했으나, 자유도가 높으면 그만큼 복잡해지고 진입장벽이 높아지니 일단 전문성을 가지지않은 유저도 부담 없이 손댈 수 있도록 프리셋을 선택해 커스터마이징하는 방식으로 개선 레이아웃 설정 컴포넌트
슬래시페이지 로고변경 및 브랜드 정비
슬래시페이지의 시작 슬래시페이지는 기존 서비스(카페노노)에서 핵심 기능이었던 에디터만을 남기고 피봇해 새롭게 시작한 서비스입니다. 사용자가 슬래시(/)를 입력해 페이지를 구성하는 에디터가 특징이었고, 이 특징을 그대로 반영해 ‘슬래시’ + ‘페이지’라는 단순한 조합으로 서비스명을 정했습니다. 초기 브랜딩 초기 심볼은 단순하게 슬래시(/)를 메타포로 사용했고, 메인 컬러도 다른 서비스들과 겹치지 않으면서 눈에 잘 띄는 형광 그린을 사용했습니다. 프로덕트 헌트 런칭용 배너 슬래시페이지는 피봇 직후 빠르게 프로덕트 헌트에 런칭했었는데, 사용자 데이터나 방향성이 확립되기 전 이였습니다. 그래서 제품의 메시지를 정리하기보다는, 화려한 그래픽으로 기존 노트형 서비스들과 차별화를 시도하고, 눈길을 끌 수 있는 방향으로 브랜드를 표현했었습니다. 당시 메인 페이지 (프로덕트 헌트에서 유입된 사용자가 로그인 없이도 서비스를 사용해볼 수 있도록 함) 당시 프로덕트 헌트에서 주간 1위를 했었는데, 이전 버전 아카이빙은 나중에 할 예정 브랜드를 재정비한 이유 이번의 재정비는 단순히 시각적인 변화만을 목적으로 한 것이 아니라, 슬래시페이지의 사용성과 앞으로의 방향성을 명확히 하는 작업이었습니다. 슬래시페이지는 지난 2년 동안 서비스의 지향점이 더 뚜렷해졌고, 이를 브랜드에 분명하게 반영하고 싶었습니다. 또한 기존 브랜드 아이덴티티가 UI 활용과 실제 전개 과정에서 비효율적인 부분이 있었기에, 실용성 측면에서도 변화가 필요했습니다. 기존의 로고는 슬래시(/) 기호 하나를 사용해 에디터의 기능적 특성을 직관적으로 표현했지만, 형태가 단순해 안정감이 부족하고, 브랜드의 방향성이 남겨있진 않았습니다. 새롭게 변경된 심볼은 서비스의 본질인 '조립형 페이지 구성 방식'을 강조하며 정육면체 블록 4개를 쌓아 알파벳 'S' 형태로 구성했습니다. 슬래시페이지의 실제 사용 방식과 방향성을 시각적으로 표현했고, 앱 아이콘 등에서 사용자가 더 쉽게 인식하고 기억할 수 있도록 의도했습니다.
이미지 편집기능 추가
페이지를 꾸미거나 포스트를 작성할 때, 이미지 규격을 다른 도구를 사용해 편집해야 하는 불편함이 커 편의성을 위한 이미지 편집기능 추가했습니다. (개인적으로 테스트용 게임 블로그 쓸 때마다 매번 포토샵으로 편집하고 사이즈 맞춰서 올리는 게 번거로웠고, 사용자 피드백에서도 종종 요청이 들어왔던 기능이라 이전부터 필요하다고 느꼈는데, 드디어 업데이트 할 수 있어 기쁘다!) 이미지 회전,반전,크롭 기능 추가 기 편집 기능을 우선 제공하고, 추후에 색상 보정,이미지 위 텍스트 추가,그리기 등 확장 될 가능성이 있어 이를 고려해 좌측에 사이드바가 있는 구조로 디자인 공통 이미지 업로드 레이어에 이미지 편집 버튼 추가 직사각형 비율은 마우스 오버시 가로형인지 세로형인지 선택할 수 있는 버튼 제공 모바일 이미지크롭
유저가 초대받은 상태에서 사이트에 방문했을 때의 처리
사용자가 다른 사람의 사이트에서 초대를 받은 경우, 초대 내역은 알림센터를 통해서만 확인할 수 있었습니다. 하지만 알림센터를 확인하지 않고 초대받은 사이트에 진입하면, 초대 사실을 인지하기 어려워 사용성에 혼란이 생길 수 있었습니다. 초대 내역을 인지하지 못하고 사이트에 바로 진입 → 권한은 부여되어 있음에도 일부 콘텐츠나 기능이 정상적으로 보이지 않는다는 오해가 생길 수 있음. 초대 내역이 있는경우에 해당 사이트에 접근했을때 권한을 바로 부여함 → 해당 사이트가 왜 보이는지,내가 이 사이트에서 어떤 권한인지 등 맥락을 파악하기 어렵고, 유저가 초대 수락,거절 여부를 선택할 수 없음 이에 따라, 사용자가 초대받은 사이트에 진입했을 때 초대 내역을 쉽게 확인할 수 있도록 안내하는 기능을 추가했습니다. 1. 초대 내역 안내 모달 추가 유저가 진입한 사이트에서 받은 알림 중 초대 내역이 있을 경우, 해당 내용을 모달로 띄워서 바로 인지할 수 있도록 함. 사이트 내에 여러개의 초대 내역이 존재할 수 있기 때문에, 초대 수에 따라 UI를 분기 조건 내용 상세 초대 1건 {username} 님이 {sitename}에 {role}권한으로 초대했습니다. - 초대 2건 이상 {sitename}에서의 초대 𝙣건 각각의 초대 내역 상세 리스트로 표시
SEO 미리보기 설정 모달 디자인 및 사용성 개선
일반적으로 많이 사용되는 SNS나 블로그 플랫폼은 외부 검색엔진에 콘텐츠가 잘 노출되지 않도록 제한적인 인덱싱 구조를 가지고 있거나, 비공개 콘텐츠 중심으로 설계되어 있습니다. 슬래시페이지는 이와 반대로, 사용자가 작성한 콘텐츠가 검색엔진에 효과적으로 노출될 수 있도록 적극적으로 지원하는 방향을 선택했습니다. 최근에는 개인 브랜딩의 중요성이 커지면서, 콘텐츠의 검색 가능성과 외부 노출이 사용자에게 실질적인 가치로 작용하고 있는데, 이 점은 슬래시페이지의 중요한 기능적 차별점이 될 수 있다고 판단했고, 이에 따라 SEO 인덱싱 관련 기능을 확장했습니다. 또한, 사용자가 해당 기능의 존재와 효과를 더 명확하게 인식할 수 있도록 UX와 설정 흐름을 함께 개선했습니다. SEO 기능 확장과 UI/UX 개선 기존에는 페이지만 SEO 설정을 할 수 있었던 구조에서, 더 작은 포스트 단위 설정도 가능하도록 기능이 추가됨 + 해당 기능의 이해도,편의성을 높히기 위해 다양한 화면(발행 플로우, 공유 레이어 등)에서 SEO 상태를 미리 확인하고, 편집할 수 있는 진입점을 추가함. 초기 구현은 각 화면마다 SEO 설정 UI를 따로 두는 구조였고, 이로인해 UI 일관성이 떨어지고 유지보수도 어려운 문제가 있었음. 해결을 위해 SEO 설정을 공통 모달 컴포넌트로 분리하고, 다양한 진입점에서 동일한 편집 경험을 제공하도록 구조를 재정리함. As is To be SEO 설정을 공통 모달로 분리해 일관성 확보, 다양한 진입점에서 동일한 편집 경험을 제공 미리보기 영역과 편집 영역을 좌우로 분리해 명확히 구분 미리보기를 적극적으로 보여주고, 사용자가 인덱싱 기능과 상태를 쉽게 인지하도록 함 디자인 전반 개선 등 URL, 파비콘 등 관련 기능 접근성을 한곳에 모아 설정 편의성,접근성 개선
커스텀 필드로 작성자 및 작성시간 숨기기
포스트 상세 페이지에서 작성자 이름과 작성 시간을 숨기고 싶어하는 케이스(예: 기업 블로그 등)가 있어, 해당 정보를 보이지 않도록 설정할 수 있도록 기능을 변경했습니다. 향후에는 사용자 타입의 커스텀 필드를 활용해, 작성자 정보를 ‘담당자’나 ‘회사 프로필’처럼 사용자가 직접 설정한 값으로 유연하게 대체할 수 있도록 구조를 확장할 계획입니다. 이를 위한 준비 단계로, 현재는 기본 작성자 정보를 커스텀 필드와 연동해 구성했습니다. 커스텀 필드의 작성자, 작성시간과 연동해 해당 커스텀 필드를 삭제하면 포스트 목록에서도 자동으로 숨겨짐