시작하기

Stackture는 아키텍처 다이어그램을 쉽게 그릴 수 있는 웹 기반 도구입니다. 별도의 설치나 로그인 없이 바로 사용할 수 있습니다.

기술 스택 검색

메인 페이지에서 원하는 기술 스택을 검색하고 선택할 수 있습니다.

• 검색창에 원하는 기술 스택의 이름을 입력하세요 (예: Spring, React)
• 검색 결과에서 원하는 기술을 클릭하여 선택할 수 있습니다
• 선택된 기술 스택은 하단에 카테고리별로 정리되어 표시됩니다

다이어그램 그리기 모드

선택한 기술 스택으로 다이어그램을 그릴 수 있습니다.

기본 도구 사용법

• 선택 도구: 요소를 선택하고 이동할 수 있습니다
• 실행 취소/다시 실행: 작업을 되돌리거나 다시 실행할 수 있습니다
• 화면 이동 및 확대/축소:
  • 마우스:
    • 화면 이동: 선택 도구 해제 상태에서 좌클릭 후 마우스 이동, 또는 휠 누르고 마우스 이동
    • 확대/축소: Ctrl(Cmd) + 마우스 휠
  • 노트북 트랙패드:
    • 화면 이동: 두 손가락으로 스와이프
    • 확대/축소: 두 손가락으로 핀치 인/아웃
  • 모바일/태블릿:
    • 화면 이동: 두 손가락으로 스와이프
    • 확대/축소: 두 손가락으로 핀치 인/아웃
• 그리드 표시: 그리드를 켜거나 끌 수 있습니다. 그리드를 사용하면 요소들을 정확하게 정렬할 수 있습니다.

기술 스택 아이콘

• 좌측 패널의 아이콘을 드래그하여 캔버스에 추가할 수 있습니다
• 아이콘은 자유롭게 이동하고 크기를 조절할 수 있습니다

도형 그리기

• 사각형, 원, 삼각형 등 다양한 도형을 그릴 수 있습니다
• 시작 위치를 클릭하고 드래그하여 도형을 그릴 수 있습니다.
• 도형의 크기와 위치를 자유롭게 조절할 수 있습니다

화살표 그리기

• 단방향/양방향 화살표를 그릴 수 있습니다
• 시작 위치를 클릭하고 드래그하여 도형을 그릴 수 있습니다.
• 방향과 길이를 조절할 수 있습니다.
• 화살표의 스타일과 굵기를 조절하는 기능을 개발할 예정입니다.

텍스트 추가

• 텍스트 도구를 선택하고 원하는 위치를 클릭하여 텍스트를 추가할 수 있습니다
• 엔터를 통해 개행할 수 있습니다.
• Esc 또는 텍스트 바깥 영역을 클릭하여 입력을 종료할 수 있습니다.
• 선택 상태에서 더블클릭 또는 엔터키를 이용하여 편집할 수 있습니다.
• 폰트 크기와 스타일을 조절할 수 있는 기능을 개발할 예정입니다.

편집하기

• 요소 선택: 클릭하여 선택하거나, Shift를 누른 채 여러 요소를 선택할 수 있습니다. 드래그를 통해서도 여러 요소를 선택할 수 있습니다.
• 요소 삭제: Ctrl(Cmd) + x 키를 눌러 선택된 요소를 삭제할 수 있습니다
• 복사/붙여넣기: Ctrl(Cmd) + c, Ctrl(Cmd) + v로 요소를 복사하고 붙여넣을 수 있습니다

저장 및 불러오기

• PNG로 저장: 다이어그램을 이미지 파일로 저장할 수 있습니다
• XML로 저장: 나중에 편집할 수 있도록 XML 형식으로 저장할 수 있습니다
• 불러오기: 저장된 XML 파일을 불러와 편집을 계속할 수 있습니다

단축키 모음

• 파일 관련:
  • Ctrl(Cmd) + S: 다이어그램을 PNG/XML 포맷으로 저장
  • Ctrl(Cmd) + O: 저장된 XML 파일을 불러오기
• 편집 관련:
  • Ctrl(Cmd) + Z: 실행 취소
  • Ctrl(Cmd) + Shift + Z: 다시 실행
  • Ctrl(Cmd) + C: 복사
  • Ctrl(Cmd) + V: 붙여넣기
  • Ctrl(Cmd) + X: 선택된 요소 삭제
  • Delete: 선택된 요소 삭제
• 선택 관련:
  • Shift + 클릭: 여러 요소 선택 추가
  • Ctrl(Cmd) + 클릭: 여러 요소 선택 토글
  • Esc: 선택 해제
• 화면 조작:
  • 스페이스바 + 드래그: 화면 이동
  • Ctrl(Cmd) + 마우스 휠: 확대/축소