Coding (164)

02
13

1. 문제 설명

 

코딩테스트 연습 - 다음 큰 숫자

자연수 n이 주어졌을 때, n의 다음 큰 숫자는 다음과 같이 정의 합니다. 조건 1. n의 다음 큰 숫자는 n보다 큰 자연수 입니다. 조건 2. n의 다음 큰 숫자와 n은 2진수로 변환했을 때 1의 갯수가 같습니

programmers.co.kr

자연수 n이 주어졌을 때, n의 다음 큰 숫자는 다음과 같이 정의합니다.

  • 조건 1. n의 다음 큰 숫자는 n보다 큰 자연수입니다.
  • 조건 2. n의 다음 큰 숫자와 n은 2진수로 변환했을 때 1의 개수가 같습니다.
  • 조건 3. n의 다음 큰 숫자는 조건 1, 2를 만족하는 수 중 가장 작은 수입니다.

예를 들어서 78(1001110)의 다음 큰 숫자는 83(1010011)입니다.

자연수 n이 매개변수로 주어질 때, n의 다음 큰 숫자를 return 하는 solution 함수를 완성해주세요.

 

2. 제한 사항

  • n은 1,000,000 이하의 자연수입니다.

 

3. 입출력 예제

n result
78 83
15 23

 

4. 나의 접근 방식

  • 일반적인 숫자를 받아 2진수로 바꾸어 1의 개수까지 구해주는 함수를 만든다.
  • 이후, n보다 크다는 조건을 위해 n + 1부터 1씩 증가시켜 주면서 계속 비교해 간다면 모든 조건을 만족시킬 수 있다.
  • 이는 반복적인 조작을 계속 1씩 증가시키면서 하면 되기 때문에 재귀로 만드는 것이 낫다고 생각하였다. 

 

5. 결과

// 재귀함수를 위해 target을 n + 1로 선언, 할당한다.
function solution(n, target = n + 1) {
    // 2진수로 만들어 1의 갯수를 계산할 함수를 만들어 준다.
    const getOneCount = (num) => {
        let countOne = 0;
        let two = num.toString(2);
        for(let i = 0; i < two.length; i++) {
            if(two[i] === "1") countOne++;
        }
        return countOne;
    }

    // 이미 n보다 크다는 조건 1을 만족한 상태이기 때문에 조건2의 기준인 1의 갯수는
    // 위의 함수에서 계산해 주기 때문에 둘의 갯수가 같으면 그대로 반환한다.
    if(getOneCount(n) === getOneCount(target)) return target;
    else {
        // 같지 않다면 1을 증가 시켜서 다시 재귀를 돈다.
        target++;
        return solution(n, target)
    };
}

 

COMMENT
 
02
12

1. 문제 설명

 

코딩테스트 연습 - 올바른 괄호

괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은

programmers.co.kr

괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어

  • "()()" 또는 "(())()" 는 올바른 괄호입니다.
  • ")()(" 또는 "(()(" 는 올바르지 않은 괄호입니다.

'(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때, 문자열 s가 올바른 괄호이면 true를 return 하고, 올바르지 않은 괄호이면 false를 return 하는 solution 함수를 완성해 주세요.

 

2. 제한 사항

  • 문자열 s의 길이 : 100,000 이하의 자연수
  • 문자열 s는 '(' 또는 ')' 로만 이루어져 있습니다.

 

3. 입출력 예제

s answer
"()()" true
"(())()" true
")()(" false
"(()(" false

 

3. 나의 접근 방식

  • s를 반으로 나누어서 열린 괄호와 닫침 괄호의 개수가 같다면 true일 것이다!라고 일차원적으로 생각했지만 실패.
  • 효율성이 떨어지며, 닫침 괄호로 시작하는 등의 경우를 생각하지 않았기 떄문에 예외 케이스가 있었다.
실패한 코드
function solution(s){
    // 열림 괄호와 닫침 괄호의 갯수를 계산한다.
    let open = 0;
    let close = 0;
    for(let i = 0; i < s.length; i++) {
        if(s[i] === "(") open++;
        if(s[i] === ")") close++;
    }
    
    if(open === close) return true;
    else return false;
}​
  • 그래서 시작이 닫침 괄호일 때는 절대로 true가 나올 수 없기 때문에 그 경우를 바로 false로 처리한 후에, 배열에 넣어서 스택처럼 열림 괄호가 나오면 배열에 넣고, 다시 닫침 괄호가 나오면 빼는 방식으로 모든 s를 돌아 검사한 후에, 그 스택에 요소가 들어 있으면 닫침과 열림의 수가 맞지 않다는 말이 되므로 false 아니면 true로 답을 낼 수 있었다.

 

4. 결과

function solution(s){
    let arr = [];
    if(s[0] === ")") return false;
    for(let i = 0; i < s.length; i++){
        if(s[i] === "(") arr.push(s[i])
        if(s[i] === ")") arr.pop();
    }
    if(arr.length === 0) return true;
    else return false;
}
COMMENT
 
02
11
 

동작과 명령

1. 모바일 환경에서 주로 쓰는 인터페이스에서의 동작 Tap(탭) 모바일 화면을 손가락으로 짧게 누른다. 마우스의 클릭에 해당한다. 개체를 선택하는 등 가장 많은 기능을 한다. swipe(스와이프) 화

hyeonsi.tistory.com

위의 포스트에서 이어집니다!

  1. 버튼 그룹(Button Groups)
    • 관련 기능끼리 묶인 버튼의 그룹이다.
    • 인터페이스에 표시할 기능이 많으면 사용하기 좋다. 항상 노출되지 않더라도 비슷한 기능끼리 모여 있으면 어디 있는지 유저는 찾기가 편하다.
    • 간단한 예시로 우리가 사용하던 그림판을 생각해 보자. 각 도구들이 비슷한 기능들이 붙어있다. 그림이면 그리는 도구, 색, 도형의 사이즈 등을 설정하는 아이콘들이 모여있고, 텍스트 입력이면 텍스트 입력에 관한 폰트 설정, 폰트 사이즈 등의 비슷한 기능을 하는 도구들이 모여있다.
  2. 호버(Hover) 또는 팝업 툴(Pop-Up Tools)
    • 어떠한 동작을 수행하기 위해 마우스를 올리면 선택할 수 있는 기능들이 나타난다.
    • 역시, 마찬가지로 항상 화면에 노출 시키킬 필요가 없으므로, 나타내야할 기능들이 많을 때 사용하기 좋다.
    • 가급적이면 기능이 작동하는 영역에서 가까운 상단이나 옆으로 배치하는것이 좋다.
    • 호버 되면 보여줄 목록이 들어가야 하기 때문에 공간의 여유를 두고 만들어야 한다.
    • 예시로는, 유튜브에서 동영상을 재생 중일 때는 하단의 볼륨이나 재생시간 등이 보이지 않다가 마우스를 올리면 다시 노출된다.
  3. 조작 패널(Action Panel)
    • 단순한 기능목록의 나열이다.
    • 가장 많이 쓰이며, 사용자가 자주쓰는 기능 등을 추천해 줄 수도 있다. 덕분에 유저에게 익숙하다.
    • 기능이 너무너무 많을경우 사용할 수 있다. 호버나 팝업으로 띄우기는 것도 한계가 있을 정도로 많을 경우 사용한다.
    • 배치하는 방법은 UI에 조작 패널을 배치한 후에, 기능을 구조화시켜서 알맞은 목록에 기능들을 정리하고 각 레이블을 기능에 지정한다.
    • 예시로는, 윈도우 OS의 윈도우 버튼을 누르면 나오는 시작 메뉴이다.
  4. 완료 버튼 강조(Prominent Done Button)
    • 최종단계의 버튼 등의 강조가 필요한 버튼만 다른 스타일을 준다.
    • 예를 들어, 쇼핑 사이트의 결제하기 버튼의 색을 다른 버튼들과 차이를 둘 수 있다.
  5. 지능형 메뉴 항목(Smart Menu Items)
    • 유저의 행동과 상황에 맞춰 동적으로 메뉴를 다르게 보여준다.
    • 인터페이스가 직관적으로 변하기 때문에 유저의 실수를 줄일 수 있다. 지금 작업 중인 요소의 메뉴만 있기 때문에 공간적으로도 유리하다.
    • 예시로는, Mac OS의 최상단 매뉴바를 예로 들 수 있다. 하고 있는 작업에 따라 메뉴가 바뀐다.
  6. 미리 보기(Preview)
    • 어떤 행동을 했을 때 결과가 어떤지 보여준다.
    • 특히, 큰 파일을 열거나 수정했을 때 결과를 미리 볼 수 있다면 원하지 않은 결과가 나와서 다시 돌아가야 할 때 시간을 크게 줄일 수 있을 것이다.
    • 예를 들어, 사진 편집 등을 할 때, 여러 가지 필터를 사용할 수 있다. 이때 미리보기를 이용해 어떤 필터가 가장 최적인지 살펴보고 적용할 수 있다.
  7. 스피너(Spinner)와 로딩 인디케이터(Loading Indicator)
    • 사용자가 선택한 기능을 수행하고 완료하기까지 걸리는 시간에 보여줄 수 있다.
    • 유저는 응답을 기다리는 동안 올바로 요청이 보내 진 것인지 알 수 있다.
    • 진행도를 함께 표시할 수 도 있다.
    • 스피너는 빙글빙글 돌아가는 애니메이션의 모습이고, 로딩 인디케이터는 지금의 진행도에 해당하는 막대가 왼쪽부터 오른쪽으로 채워지면서 끝까지 가면 100%가 되는 우리가 로딩에서 자주 볼 수 있는 모습이다.
  8. 취소 가능성(Cancelability)
    • 시간이 오래 걸리는 작업을 기다릴 때 유저는 취소할 수 있다.
    • 유저가 상황을 컨트롤할 수 있게 하는 것은 오류 예방과 복구에 도움을 줄 수 있다.
    • 예시로는, 구글 플레이 스토어나 앱스토어에서 애플리케이션을 다운로드하고 있을 때 X 버튼으로 취소할 수 있는 경우이다.
  9. 매크로(Macros)
    • 동작들을 기억했다가 그 동작들을 묶어서 계속 실행시켜 준다.
    • 반복되는 동작이 필요할 경우 유저는 편하게 매크로를 사용할 수 있다.
    • 예시로는, 모바일 기기로 사진을 찍으면 자동으로 클라우드 시스템에 업로드시켜주는 서비스 등이 있다.
결국, 가장 중요한 것은 중요한 동작이 가장 잘 보이도록 만드는 것이다. 사소한 기능들이라고 해도 유저가 느끼기에 안정감과 빠르고 효율적인 탐색은 UX를 크게 상승시킨다. 이를 위해 유저가 앱을 사용할 때의 Flow에 더 집중하여 계속 개선해 나갈 수 있다.

'Coding > UX Insight' 카테고리의 다른 글

동작과 명령  (0) 2022.02.10
목록 만들기  (0) 2022.02.09
내비게이션 패턴  (0) 2022.01.25
모바일 디자인의 패턴  (0) 2022.01.24
모바일 인터페이스  (0) 2022.01.21
COMMENT
 
02
10

swipe 기능의 유쾌한 반란, Fruit Ninja 입니다. 스와이프를 하듯이 손가락을 움직여 과일을 자를수 있죠. 출처 : https://play.google.com/store/apps/details?id=com.halfbrick.fruitninjafree&amp;amp;hl=en&amp;amp;gl=US

1. 모바일 환경에서 주로 쓰는 인터페이스에서의 동작

  1. Tap(탭)
    • 모바일 화면을 손가락으로 짧게 누른다.
    • 마우스의 클릭에 해당한다.
    • 개체를 선택하는 등 가장 많은 기능을 한다.
  2. swipe(스와이프)
    • 화면을 눌러 상하좌우 방향으로 날리듯 긁는다.
    • 스크롤에 해당한다. 하지만 모바일 환경에서는 더 다양한 기능을 하기도 한다.
    • 목록의 이동이나 설정 등을 불러올 수 있다.
  3. pinch(핀치)
    • 화면을 양 손가락으로 안쪽으로 움직여서 늘리거나 밖으로 움직여서 줄인다.
    • 모바일에서 중요한 기능이다. 화면이 작기 때문에 크게 늘려서 볼 수 있다.
  4. 회전
    • 모바일 기기를 가로나 새로로 다시 잡는다.
    • 물론, 데스크탑으로는 불가능하다.
    • 가속도계와 같은 센서가 모바일 디바이스에는 장착되어 있으므로 움직임을 읽어 화면 방향을 바꿔준다.
    • 가로로 돌리면 동영상과 같은 컨텐츠를 즐기기 편하다.
  5. 흔들기
    • 모바일 기기를 흔든다.
    • 회전과 같이 모바일 기기에서만 가능하고, 역시 가속도계 등의 센서를 이용한다.
    • 음악 플레이앱에서 다른 음악으로 전환하는 등의 기능을 할 수 있다.

 

2.  모든 환경에서 가능한 인터페이스 동작

  1. 버튼
    • 인터페이스 바로 위로 배치하는 것이 좋다. 유저는 다른 동작이 필요 없이 바로 버튼을 볼 수 있어야 하기 때문이다.
    • 가장 쉬운 동작에 해당한다.
  2. 메뉴바
    • 데스크톱 환경에서 많이 사용된다.
    • 전체 기능등을 묶어서 한 번에 보여주기 유리하다.
  3. 팝업 메뉴
    • 클릭이나 탭에 따라 짧게 작은 알림을 띄울 수 있다.
    • 길면 좋지 않다. 화면을 너무 가려서도 안된다. 사용에 불편할 수 있기 때문이다.
  4. 드롭다운 메뉴
    • 콤보박스등을 누르면 옵션들이 나열된다.
    • 동작을 실행하기 보다, 옵션을 바꾸는 것에 사용된다.
    • 기능에 사용하지 않는 것이 좋다. 불편하다.
  5. 툴바
    • 아이콘이나 짧은 텍스트를 나열하여 접근성을 높일 수 있다.
    • 드롭다운이나 선택기능이 같이 있는 경우도 있다.
    • 너무 긴 설명이나 아이콘이 적절히 없을 때는 다른 기능을 사용하는 것이 좋다.
  6. 링크
    • 파란색으로 표시된 텍스트로, 누르면 다른 사이트로 이동하거나 새로운 탭이 열린다.
    • 물론, 파란색이 아닐 수 도 있다. 디폴트는 파란색이다.
  7. 조작 패널
    • 항상 화면에서 유저가 볼 수 있는 패널이다.
    • 기능이 시작적으로 보이는 것 보다 편할 때 툴바 대신 사용할 수 있다.
  8. 호버 툴
    • 각 항목에서 2개 이상의 기능을 실행 할 수 있을 때, 항목에 마우스를 올리면 버튼을 보여줘서 너무 많은 요소들이 화면에 나오는 경우를 줄일 수 있다.
    • 터치 스크린에서는 사용이 쉽지않다.
    • 기능이 숨겨져 있기 때문에 유저가 이곳에 호버 툴이 있다는 것을 알 수 있어야 한다.
  9. 드래그 앤 드롭
    • 마우스나 탭으로 요소를 꾹 누른 상태로 다른 위치로 가져다 놓는 것을 말한다.
    • 항목들을 이동하거나 복사, 붙여 넣기 등에 사용된다.
  10. 텍스트 명령
    • CLI로 직접 명령어를 입력하여 기기에 명령을 내린다.
    • 요즘에는 GUI로 시각적 표현이 되는  경우가 많기 때문에 잘 사용하지 않는다.
  11. 어포던스
    • 버튼 등에 호버 툴이나 드래그 앤 드롭 등의 기능이 있다는 것을 표현하기 위해 쓰이는 기능을 말한다.
    • 색을 다르게 한다던가, 호버 스타일 등으로 차별을 두어 표시할 수 있다.

 

'Coding > UX Insight' 카테고리의 다른 글

동작과 명령의 패턴  (0) 2022.02.11
목록 만들기  (0) 2022.02.09
내비게이션 패턴  (0) 2022.01.25
모바일 디자인의 패턴  (0) 2022.01.24
모바일 인터페이스  (0) 2022.01.21
COMMENT