[Copy Stack] 목업 만들기

간단하게 목업을 만듭니다. 목업 작업은 Figma로 했습니다.

디자인은 전체적으로 Material Design 3 가이드를 따랐습니다.

Copy

텍스트 복사본 카드

이미지 복사본 카드

Copy에 대한 미리 보기가 Card 형태로 제공되고 Copy 버튼을 누르면 복사가, Delete 버튼을 누르면 삭제가 되도록 구상했습니다.

미리 보기에선 텍스트의 경우 짧은 요약, 이미지의 경우 미리 보기 이미지가 작게 나타나는 형태로 생각했습니다. Copy에 유니크한 타이틀이 없기 때문에 카드 상단에 복사를 생성한 사이트의 정보가 나타나도록 했습니다.

카드를 클릭하면 카드가 확장되며 위와 같이 자세한 정보가 나타납니다.

이미지 복사본 카드인 경우 이미지를 더 크게, 그리고 이미지에 대한 정보를 제공합니다.

마지막으로 위의 detail을 헤더, bottom menu로 감싸줍니다.

popup

카드는 위와 같이 카드 리스트로 길게 이어져 스크롤을 내려 확인할 수 있게 합니다.

위의 카드 리스트를 감싸는 popup입니다. chips를 통해 타입별로 copy를 필터링할 수 있습니다.

최종적으로 보게되는 화면은 위와 같아집니다. 물론 테마와 스타일에 대해선 좀 더 고민할 여지가 있지만 우선 목업이니 이 정도면 충분할 듯합니다. 큰 틀만 잡아놓고 색상이나 디테일은 거의 마지막에 잡는 걸로 하겠습니다.