728x90

전체 글 294

깃허브 사용시 자주 에러나는 부분

https://beingdesigner.tistory.com/40 [Github 깃헙] git push origin main? master? 문제 발생 git push origin master를 하는데, 리모트저장소에는 계속 올라가지 않는다.. 딱 봐도 문제점은 눈에 보인다. main 이 default 라고 떡하니 써있는데 , 나는 master로 푸시를 했다. 이걸 인지하고 gi beingdesigner.tistory.com 푸쉬할때 자주 에러나는 이유는 로컬저장소는 현재 master 브랜치에 있는데 원격저장소는 main 에 업로드하려고 하면 안된다. 현재 로컬 저장소가 master 브랜치에 있으면 푸쉬할때 원격저장소도 master 브랜치에 해야 한다.

깃허브 2024.01.22

개발시 자주 사용하는 명령어 모음

https://lejh.tistory.com/category/IT/CMD%20%EB%AA%85%EB%A0%B9%EC%96%B4 'IT/CMD 명령어' 카테고리의 글 목록 일상 및 IT 지식 공유 lejh.tistory.com https://joyful-ugentstudent-note.tistory.com/27 [CMD 명령 프롬포트] linux (pwd, ls, clear...) cmd 명령어 linux cmd 현재 경로 위치 pwd cd 디렉터리 이동 cd [path] cd [path] 목록 표시 ls dir 터미널 초기화 clear cls 파일 열기 open [file] type [.txt] 명령어 도움말 man help 파일 복사 cp copy 파일이동 mv move 파일 생성 tou joyful-..

CMD 명령어 2024.01.17

피그마 드롭다운 & 모달창 인터렉션 구현하기

https://nicecarrot2.tistory.com/193 [figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등) [figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등) 안녕하세요. 당근입니다. 오늘은 피그마 프로토타이핑에 대한 포스팅입니다. 프로토타이핑 할 때, 어떤 버 nicecarrot2.tistory.com

디자인/피그마 2023.12.06

3. 화면 정의서 작성방법

화면 정의서는 한장 한장 순서대로 완벽하게 작성하는 것이 아니라 웹 사이트의 이용흐름(워크플로우)에 따라 모든 화면을 대강 스케치한 다음 조금씩 살을 덧붙이면서 구체화하는 방식으로 작성한다. 웹 사이트의 화면들은 일직선으로 연결된 것이 아니라 복잡하게 뒤엉켜 있다. 이 때문에 뒷부분의 내용을 작성하거나 수정함에 따라 앞부분의 내용도 수정해야 할수 있다. 순서대로 모든 화면을 대강 스케치하기 한 화면씩 완벽하게 작성하지 않고, 화면들의 연결흐름에 따라 생각나는대로 대강 스케치한다. 스케치하면서 떠오르는 생각이나 주의사항을 디스크립션에 간단하게 메모해둔다. 모든 화면의 디스크립션 작성하기 앞서 개략적인 스케치가 완성되면 틈틈이 메모한 내용을 바탕으로 좀 더 구체적으로 디스크립션을 작성한다. 스케치와 같은 방..

2. 화면 정의서 구성요소 이해하기

화면 정의서는 표지, 히스토리, 사이트맵, 본문으로 구성된다. 브리핑이나 세미나 등 상황에 따라 기능 정의서나 정책 정의서 등을 히스토리 다음에 추가하기도 한다. 표지 문서의 표지는 간단하게 작성한다. 웹사이트 이름을 표지 맨 상단에 기재한다. 그리고 작성자, 회사명, 문서버전, 연락처 등을 추가로 작성한다. 화면 정의서에서 공통적인 항목을 명시하면 된다. 특히 문서버전을 기재하여 다른 문서와 헷갈리지 않도록 한다. 문서이력 문서내용이 변경될때마다 문서이력을 기록해두면 수정된 부분만 빠르게 찾아볼 수 있다. 디자이너나 개발자가 이전 버전에서 어떤 부분이 어떻게 수정되었는지 알면 프로젝트를 수행할때 도움이 되고, 작업효율도 올라간다. 또한, 최신버전의 웹사이트가 여러가지 문제로 인해 제대로 동작하지 않는 ..

1. 기획자는 화면 정의서로 말한다

화면 정의서는 청사진이다 화면 정의서는 웹 사이트의 기능, 정책, 화면 UI가 모두 반영되어 있는 최종 산출물이다. 화면 정의서를 만드는 일은 기획자에게 매우 중요하지만, 기능이나 사용자의 이용형태에 따라 고려해야 하는 경우의 수가 많기 때문에 꽤 힘든 작업이다. 디자이너, 퍼블리셔, 개발자는 화면 정의서를 참고하면서 프로젝트를 진행하기 때문에 화면 정의서는 웹사이트의 '건축 설계도'와 같다. 화면 정의서를 보면 웹사이트가 전반적으로 어떻게 동작하는지 이해할 수 있다. '해당 화면은 이런 기능들이 있구나' '해당 화면의 UI는 이렇구나' 처럼 누구나 화면 정의서를 보고 웹사이트의 동작방식이나 UI를 파악할 수 있어야 한다. 디자이너가 '이 화면은 어떻게 보여지나요?'라던지 개발자로부터 '이 화면에서 하단..

2. 글로벌 내비게이션(GNB) 설계하기

사이트 구조를 설계하는 중요한 이유는 해당 프로젝트를 진행하는 작업자 때문이다. 디자이너, 퍼블리셔, 개발자가 웹사이트의 전체적인 윤곽을 알면 작업을 시작하기 전에 작업범위와 방법을 예상해볼 수 있다. 서로 관련된 화면끼리 묶으면 디자인이나 개발을 할때도 패턴이 비슷하기 때문에 작업효율도 좋아진다. 예를 들어, 공지사항 게시판, 커뮤니티 게시판, 자유 게시판은 컨텐츠만 다를뿐 공통적으로 게시판 형태이기 때문에 개발시 비슷한 패턴이 반복된다. 이에 반해 글로벌 내비게이션(GNB)은 사용자가 원하는 정보를 쉽고 빠르게 찾을수 있는 경로를 설계하는 것이다. 다시 말해, 사이트맵은 작업자를 위한 용도이고, GNB는 이용자를 위한 용도이다. 이용자의 동선 고려하기 내비게이션은 이용자가 원하는 정보를 쉽게 찾을수 ..

1. 웹 사이트 구조 설계하기

웹사이트는 내가 서비스하고 있는 사이트에 있는 모든 화면(웹페이지)의 합이다. 이러한 관점에서 웹 사이트 구조를 설계한다는 것은 웹 사이트에 들어가는 각각의 화면들을 관련된 것들끼리 묶어서 재분류하고 재배치하는 것이다. 레고 블럭은 하나의 기능을 의미한다. 레고 완성품은 하나의 웹화면을 의미한다. 기획자는 레고블럭을 기획의도에 따라 어떤 식으로 조립하는지에 따라 전혀 다른 웹사이트를 만들수 있다. 각 화면은 화면 정의서에서 확인할 수 있는데 하나의 화면에는 여러개의 기능이 존재할 수 있기 때문에 관련된 기능들을 다시 그룹으로 묶어서 재분류한다. 즉, 기능이 모여 한 화면을 구성하고, 여러 화면이 모여 사이트가 된다. 이렇게 사이트 구조를 설계하면, 핵심기능만 뽑아서 사이트맵을 만들수 있다. 기능을 화면 ..

728x90