오래 전부터 클라이언트 프로젝트 관리를 위해 Discourse 인스턴스를 사용해 왔고, 이제 더 많은 공개 콘텐츠를 추가하여 사례 연구와 자료를 공유하기로 결정했습니다. 아직 진행 중인 작업이라(데스크톱 환경에만 스타일링이 적용되어 있고, 대부분의 주제에 최소한의 내용만 포함되어 있음) 이 사이트를 너무 오래 보아 온 탓에 객관적인 판단을 내리기 어렵습니다.
피드백을 주시면 좋겠습니다:
전반적으로: 직관적인가요? 제가 공유하는 내용이 의미가 있나요? 다른 것을 공유하거나 강조점을 다르게 설정해야 한다고 생각하시나요?
수정: 언급된 문제를 해결하기 위해 이 컴포넌트를 다시 작성했습니다 기술적인 측면에서: 제가 사용하는 중앙 레이아웃 컴포넌트는 수정된 사이드바/헤더 플로우입니다. 목표는 헤더 또는 사이드바 중 하나의 주요 내비게이션 바만 표시하는 것입니다. 순수한 컴포넌트는 Manuel Kostka / Discourse / Helpers / Sidebar Flow · GitLab 에 있으며, 플로우를 구축하기 위해 두 가지 접근 방식을 사용했습니다:
헤더를 사이드바 위에 투명하게 재선언하고, 그리드를 지정하여 사이드바 토글과 로고를 사이드바 너비에 맞게 정렬
스타일 해킹을 사용하여 사이드바 배경을 확장 (전체 페이지에 drop-shadow를 선언한 후 clip-path로 제한)
지금까지 기본 슬라이드 애니메이션을 유지하면서 가장 아름다운 애니메이션을 얻을 수 있었기 때문에 이 방식을 선택했습니다. 즉, 사이드바가 슬라이드 인하면서 배경이 왼쪽과 헤더 방향으로 확장되고, 투명한 헤더가 그 위에 겹쳐지는 구조입니다.
단점으로는 헤더를 그리드로 재선언하면 헤더에 렌더링되는 다른 컴포넌트들과 잘 호환되지 않는다는 점입니다. 또한 아직 Safari에서 clip-path 해킹이 작동하도록 만드는 방법을 찾지 못했습니다. 그래서 여기 계신 CSS 마법사들 중 더 나은 아이디어를 가진 분이 계시다면 궁금합니다!
네, 이 플랫폼은 전적으로 고객이 프로젝트 관리를 위해 로그인하도록 만들어졌기 때문에 실제로 메인 CTA입니다. 공개 쇼케이스를 추가하는 아이디어를 다시 생각해 봐야 할 것 같습니다. 아니면 적어도 두 가지 측면을 어떻게 배치할지 고려해야겠죠.
제가 직접 구현한 프로젝트만 포함하려는 의도입니다. 각 프로젝트에 대해 사례 연구 토픽으로 링크를 걸면 명확해질 것 같습니다.
이것은 제가 언급한 clip-path를 사용한 CSS 해킹 때문인데, 아직 Safari에서는 작동하지 않습니다.
전반적으로는 아직 실험적인 단계라 사용하기에는 이르다고 생각합니다. 먼저 전용 테마에서 사이드바 플로우를 구현해 보는 것이 좋겠습니다. 결국 여기서 해결하고 싶은 주요 구현 과제는 다음과 같습니다: 사이드바를 왼쪽 창 가장자리에 고정하지 않고 더 유동적인 플로우를 갖춘 전체 폭(full-width) 레이아웃을 구축하는 것입니다.
